Question

这是HTML：

<div class="abs first">hello</div>
<div class="abs">hello no .first one</div>
<div class="abs">hello no .first second</div>
<div class="abs">hello no .first third</div>

和jQuery：

$(function(){
  $('.abs').on('click', function(){
    if('.abs').hasClass('first'){
      $('.abs').removeClass('first');
    }else{
      $('.abs').addClass('first');
    }
  })
})

但它不起作用。我做错了什么？请纠正我。

Answer 1

两种可能的选择：

$(function(){
    $(".abs").click(function() {
        $(this).toggleClass("first");
  });
});

或者

$(function(){
    $('.abs').on('click', function() {
        $(this).toggleClass("first");
  });
});

不确定是否符合设计要求，但您的代码无法从已点击的元素中删除.first，但不是当前的点击目标。

Answer 2

if语句错误。而且我也认为你不想每次点击都改变所有4个元素。所以你想在事件处理程序中使用$（this）。

以下示例从所有元素中删除“first”类并将其添加到单击的元素中：

$(function(){
  $('.abs').on('click', function(){
    $('.abs').removeClass('first'); //remove .first from all elements
    $(this).addClass('first'); //add .first to the clicked element
  })
})

jQuery添加类并删除div中的类

2 个答案: