Question

已经很晚了，所以我希望我错过了一些简单的事情。

我有一个使用字体超棒的fa-plus符号的div。如果点击，我希望它改为fa-minus，反之亦然。还有一个额外的类add-team || remove-team，这就是click事件的运行方式。

它会从+更改为 - 但在第二次单击时不会返回+。

我也从 - 到+完成了它并且它不会改回 - 。

这是我的div：

<div class="col-1 fa fa-plus add-team"></div>

以下是我简单的jQuery行：

$(".add-team").click(function () {
    $(this).addClass("fa-minus remove-team").removeClass("fa-plus add-team");
});

$(".remove-team").click(function () {
    $(this).addClass("fa-plus add-team").removeClass("fa-minus remove-team");
});

希望我能错过一些简单的东西。感谢。

Answer 1

问题是您的事件侦听器仅设置为侦听当前具有这些类的元素。当元素的类发生更改时，侦听器不会动态更改。因此，元素以add-team开头，只有add-team侦听器才能正常工作。

你可以做的是使用设置delegate event listener，一个在不改变的父元素上设置的监听器，例如document并运行监听器。

$(document).on('click','.add-team',function(){
   //...
});
$(document).on('click','.remove-team',function(){
   //...
});

但您也可以使用单个事件监听器并使用jQuery's toggleClass()在一次调用中切换所有类

$(this).toggleClass("fa-plus fa-minus add-team remove-team");

演示

$(".col-1").click(function () {
    $(this).toggleClass("fa-plus fa-minus add-team remove-team");
});

.col-1 {
  font-size:24px;
  font-weight:bold;
}
.fa-plus:after {
  content:'+';
}
.fa-minus:after {
  content:'-';
}
.add-team {
  color:green;
}
.remove-team {
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-1 fa fa-plus add-team"></div>

JQuery - 不切换类

1 个答案: