jQuery循环点击切换类问题：奇数点击加active_img，偶数点击加reverse_img

我来帮你搞定这个点击切换类的困扰！你想要的效果是：奇数次点击.menu时，给.menu_img加上active_img类；偶数次点击时，移除active_img并替换成reverse_img，以此循环对吧？

你的现有代码失效的原因大概率是只处理了从active_img到reverse_img的切换，没考虑从reverse_img切回active_img的逻辑——当第二次点击后，元素上只有reverse_img，原代码的判断条件（检查是否有active_img）就不成立了，自然不会触发后续的切换。

下面给你两种靠谱的解决方案：

方案一：用数据属性跟踪点击次数 #

这种方法通过data()存储点击次数，逻辑清晰，适合需要明确区分奇偶次数的场景：

$('.menu').click(function() {
  // 获取当前点击次数，初始默认为0
  let clickCount = $('.menu_img').data('clickCount') || 0;
  clickCount++;
  // 更新存储的点击次数
  $('.menu_img').data('clickCount', clickCount);
  
  if (clickCount % 2 === 1) {
    // 奇数次点击：添加active_img，移除reverse_img
    $('.menu_img').removeClass('reverse_img').addClass('active_img');
  } else {
    // 偶数次点击：移除active_img，添加reverse_img
    $('.menu_img').removeClass('active_img').addClass('reverse_img');
  }
});

方案二：直接判断当前类状态 #

如果不需要跟踪具体次数，只需要基于当前类切换状态，这种方法更简洁：

$('.menu').click(function() {
  const $targetImg = $('.menu_img');
  
  if ($targetImg.hasClass('active_img')) {
    // 当前是active_img状态，切换到reverse_img
    $targetImg.removeClass('active_img').addClass('reverse_img');
  } else if ($targetImg.hasClass('reverse_img')) {
    // 当前是reverse_img状态，切回active_img
    $targetImg.removeClass('reverse_img').addClass('active_img');
  } else {
    // 初始无类状态，第一次点击添加active_img
    $targetImg.addClass('active_img');
  }
});

额外优化建议 #

如果页面上有多个.menu元素，一定要用$(this)关联对应的.menu_img，避免所有元素同时切换：

$('.menu').click(function() {
  // 只操作当前点击的.menu下的.menu_img
  const $targetImg = $(this).find('.menu_img');
  let clickCount = $targetImg.data('clickCount') || 0;
  clickCount++;
  
  $targetImg.data('clickCount', clickCount);
  
  if (clickCount % 2 === 1) {
    $targetImg.removeClass('reverse_img').addClass('active_img');
  } else {
    $targetImg.removeClass('active_img').addClass('reverse_img');
  }
});

这样每个菜单的切换状态都是独立的，不会互相干扰~

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