WordPress中jQuery实现点击切换Pipe元素样式（单选效果）

嘿，作为jQuery新手能写出点击加类的代码已经很棒啦！要实现你说的单选切换（只有点击的那个pipe变样式，其他恢复原状）其实很简单，核心就是先“清空所有激活状态”，再“给当前点击的元素加激活状态”，咱们一步步来：

基础实现方案 #

假设你的所有pipe元素都带有.--clearGreen类，直接用下面的代码就能搞定：

// 给所有pipe元素绑定点击事件
$('.--clearGreen').on('click', function() {
  // 第一步：移除所有pipe元素上的激活类
  $('.--clearGreen').removeClass('--clearGreenClicked');
  // 第二步：给当前被点击的pipe添加激活类
  $(this).addClass('--clearGreenClicked');
});

逻辑解释 #

每次点击任意一个pipe时，我们先把所有.--clearGreen元素的.--clearGreenClicked类移除，这样其他pipe就会恢复原始样式；然后再给当前被点击的这个元素单独加上激活类，就实现了“单选”的效果。

进阶精准优化（可选） #

如果你的页面里还有其他带.--clearGreen类的元素不是pipe，建议给所有pipe元素再加一个共同的标识类（比如.pipe-item），这样选择器更精准，不会影响到其他元素：

$('.pipe-item.--clearGreen').on('click', function() {
  $('.pipe-item.--clearGreen').removeClass('--clearGreenClicked');
  $(this).addClass('--clearGreenClicked');
});

动态元素适配（如果需要） #

如果你的pipe元素是WordPress通过AJAX动态加载的（比如分页加载、筛选后加载），上面的直接绑定事件会失效，这时候要用事件委托，把事件绑定到一个始终存在的父元素上：

// 替换成你实际的pipe父容器选择器，比如.pipes-wrapper
$('.pipes-wrapper').on('click', '.--clearGreen', function() {
  $('.--clearGreen').removeClass('--clearGreenClicked');
  $(this).addClass('--clearGreenClicked');
});

这样不管后续加载多少新的pipe元素，点击事件都能正常触发~

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