javascript - 点击事件的jquery开关类

Question

我有以下例子:

<div class="filtrer">
    <a class="bold">Url 1</a>
    <a>Url 2</a>
</div>

第一个 url 处于事件状态，第二个处于非事件状态，粗体表示已选中。我应该只被允许按 Url 2，一旦我这样做，粗体类应该切换到 Url 2。

我已经尝试过但没有成功的是:

$('.filtrer a').filter(':not(.bold)').on('click', function(){
    var current = $('.filtrer a').filter(':not(.bold)');
    var standby = $('.filtrer a.bold');

    current.addClass('bold');
    standby.removeClass('bold');
})

有人知道为什么这不起作用吗？或者有优化的解决方案？谢谢

Answer 1

您正在处理动态元素选择器，因此您需要使用基于委托(delegate)的事件处理程序

var $as = $('.filter a');
$('.filter').on('click', 'a:not(.bold)', function () {
    var current = $as.filter(':not(.bold)');
    var standby = $as.filter('.bold');

    current.addClass('bold');
    standby.removeClass('bold');
})

演示:Fiddle

可以写成

var $as = $('.filter a');
$('.filter').on('click', 'a:not(.bold)', function () {
    $as.toggleClass('bold');
})

演示:Fiddle