点击图标状态切换异常，如何为click事件定义多状态？

你的代码问题出在判断逻辑上：你一直检查元素是否包含fa-circle-chevron-down类，但这个类是图标默认自带的，点击后并没有被移除，所以每次点击都会执行addClass("add")，永远不会触发else分支的移除操作，导致二次点击没反应。

下面是几种可行的解决方法：

方法1：用jQuery的toggleClass（最简洁） #

直接利用jQuery内置的类切换方法，一行代码搞定状态切换：

$(".test").on("click", function() {
  $(this).toggleClass("add");
})

方法2：原生JS的classList.toggle（无需jQuery） #

如果不想依赖jQuery，原生JS也有同样功能的API：

let icon = document.querySelector(".test");

icon.addEventListener("click", function() {
  this.classList.toggle("add");
})

方法3：修正你的判断逻辑 #

如果坚持要自己写条件判断，应该检查的是add类是否存在，而不是图标默认类：

let icon = document.querySelector(".test");

icon.addEventListener("click", function() {
  if (this.classList.contains("add")) {
    $(this).removeClass("add");
  } else {
    $(this).addClass("add");
  }
})

以上三种方法都能实现点击图标切换状态、再次点击恢复的效果，选你习惯的写法就行。

内容的提问来源于stack exchange，提问作者php