jQuery如何仅针对带lorem类的img元素执行类切换操作

你的代码逻辑错误来自jQuery选择器和方法的生效规则：

1. $('img')会选中页面上所有的img元素，不是某一个特定图片
2. 对包含多个元素的jQuery对象调用hasClass('lorem')时，只要集合里任意一个元素带有lorem类，就会返回true，不会自动筛选出带这个类的元素
3. 后续你写的$('img').addClass/removeClass操作，是对所有选中的img生效，自然会把不带lorem类的其他图片也改掉类名。

最简洁的写法是直接从选择器阶段就锁定目标元素，不需要写冗余的if判断，用toggleClass就能实现两个类的互斥切换：

// 仅选中带lorem类的img元素，在两个类之间切换
$('img.lorem').toggleClass('lorem smalllorem');

如果你需要保留if-else的判断逻辑，必须遍历每一个图片，对单个当前元素做判断和操作，不要全局操作所有img：

$('img').each(function() {
  const $curImg = $(this);
  // 只处理带lorem或者smalllorem类的图片，不碰其他无关图片
  if ($curImg.hasClass('lorem')) {
    $curImg.removeClass('lorem').addClass('smalllorem');
  } else if ($curImg.hasClass('smalllorem')) {
    $curImg.addClass('lorem').removeClass('smalllorem');
  }
})

• 优先用精准选择器缩小操作范围，不要先选全量元素再做判断，既能避免误操作，也能提升脚本运行性能
• 对多元素jQuery集合调用大部分方法（包括addClass/removeClass）时，默认会对集合内所有元素生效，不会自动按hasClass的结果过滤元素。

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