Jquery 在单击事件时切换类

Jquery switch class on click event

本文关键字：事件 单击 Jquery      更新时间：2023-09-26

我有下面的例子：

<div class="filtrer">
    <a class="bold">Url 1</a>
    <a>Url 2</a>
</div>
第一个 url 处于活动状态，

第二个 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');
})

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

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

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');
})

演示：小提琴

它可以写成

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

演示：小提琴

$('.filter').on('click','a:not(.bold)',function(){
  $(this).siblings().add(this).toggleClass('bold');
});

或者没有jQuery：

<div class="filter">
  <input type="radio" name="url" id="url1"><label for="url1">url1</label>
  <input type="radio" name="url" id="url2"><label for="url2">url2</label>
</div>


.filter input[type=radio]{
  display:none;
}
.filter input[type=radio]:checked + label{
  font-weight:bold;
}

例 1例 2

你拼错了"filter"，在你的代码或HTML中更改它。

$('.filtrer').on('click',' a:not(.bold)', function(){    
    $('.filtrer a.bold').removeClass('bold');;
    $(this).addClass('bold');    
})

像这样：

$('.filter a').click(function() {
    $('.filter a').removeClass('bold');
    $(this).addClass('bold');
});

？

相关文章：