jQuery: нажатая ссылка должна исчезнуть, дальнейшие клики не принимаются - PullRequest
Новая
       17

jQuery: нажатая ссылка должна исчезнуть, дальнейшие клики не принимаются

1 голос
/ 23 декабря 2010

с Помощь пользователям Stackoverflow Теперь у меня есть ссылки, которые исчезают при нажатии:

alt text

<!DOCTYPE html>
<html>
<head>
<style>
a.toggle {
        color:#3E6D8E;
        background-color: #E0EAF1;
        border-bottom: 1px solid #3E6D8E;
        border-right: 1px solid #7F9FB6;
        padding: 3px 4px 3px 4px;
        margin: 2px 2px 2px 0;
        text-decoration: none;
        font-size: 90%;
        line-height: 2.4;
        white-space: nowrap;
}

a.toggle:hover {
        background-color: #e7540c;
        color: #E0EAF1;
        border-bottom: 1px solid #A33B08;
        border-right: 1px solid #A33B08;
        text-decoration: none;
}

a.filter {
        color:#3E6D8E;
        background-color: #E0EAF1;
        border-bottom: 1px solid #3E6D8E;
        border-right: 1px solid #7F9FB6;
        padding: 3px 4px 3px 4px;
        margin: 2px 2px 2px 0;
        text-decoration: none;
        font-size: 90%;
        line-height: 2.4;
        white-space: nowrap;
}

a.filter:hover {
        background-color: #3E6D8E;
        color: #E0EAF1;
        border-bottom: 1px solid #37607D;
        border-right: 1px solid #37607D;
        text-decoration: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
$(document).ready(function () {
        $('a.toggle').click(function () {
                $(this).prev().andSelf().fadeOut('fast');
        });
});
</script>
</head>
<body>
<p>Please click on
<a class="filter" href="?filter=1">Tag 1</a><a class="toggle" href="/?toggle=2">X</a></p>

<p>Please click on
<a class="filter" href="?filter=2">Tag 2</a><a class="toggle" href="/?toggle=2">X</a></p>
</body>
</html>

Но теперь у меня возникла новая проблема: когда ссылка «X» была нажата, и она начала исчезать, ее можно будет снова щелкнуть, и это плохо для моего сценария, потому что «X» не должен полностью удаляет «тег», но просто переместите его под скрытый раздел, как вы можете видеть на этом скриншоте. И затем последующий клик должен переместить его назад:

alt text

Как можно предотвратить последующие клики?

Возможно, мне следует вызвать $ (this) .prev (). AndSelf (). FadeOut ('fast'). Attr ('href', XXX); ? Но какое здесь должно быть новое значение?

Спасибо! Alex

Ответы [ 3 ]

2 голосов
/ 23 декабря 2010

По аналогии с тем, что сказал Майк, однако, вместо того, чтобы беспокоиться об отмене привязки, пусть jQuery сделает это за вас: 

    $('a.toggle').one("click", function () {
            $(this).prev().andSelf().fadeOut('fast');
    });

Это означает, что функция сработает один раз, а затем самостоятельно свяжет ее.

1 голос
/ 23 декабря 2010

Вы можете отменить привязку (удалить) событие щелчка, как только оно будет запущено, обеспечивая его запуск только один раз. 

$(document).ready(function () {
        $('a.toggle').click(function () {
                $(this).unbind("click").prev().andSelf().fadeOut('fast');
        });
});
0 голосов
/ 23 декабря 2010

Вы можете использовать '#' и просто заставить обработчик кликов возвращать значение false, если href равно #.

...