如何在jQuery的onChange事件中使用$this关键字添加/移除类

嘿，我来帮你搞定这个问题～你之前的代码主要有两个小坑：一是setTimeout回调里的this指向不对，二是没正确关联下拉框选中项和对应的.ingradient元素。咱们一步步来修正：

核心问题分析 #

1. this指向漂移：setTimeout的回调函数默认会指向全局对象（浏览器里就是window），不是触发change事件的那个下拉框，所以你之前在fnRemClass里用$(this)根本找不到目标元素。
2. 选择器错误：$('.ingradient', this)是在当前下拉框内部查找.ingradient，但从你的截图来看，.ingradient应该是在下拉框外部的独立元素，所以这个选择器逻辑不对。

正确解决方案 #

首先得明确下拉框的option和.ingradient元素的关联方式（比如option的value对应.ingradient的data属性，或者两者的索引对应），下面给出两种常见场景的代码：

场景1：用data属性关联（推荐） #

假设你的DOM结构是这样的：

<select class="tt-select">
  <option value="ingredient-1">食材1</option>
  <option value="ingredient-2">食材2</option>
</select>

<div class="ingradient" data-target="ingredient-1">对应食材1的元素</div>
<div class="ingradient" data-target="ingredient-2">对应食材2的元素</div>

对应的JS代码：

$('.tt-select').change(function(){  
  // 保存当前下拉框的jQuery对象，避免this指向变化
  const $currentSelect = $(this);
  // 获取选中option的value值
  const selectedValue = $currentSelect.find(':selected').val();
  // 找到对应的.ingradient元素（根据data-target匹配）
  const $targetIngredient = $('.ingradient[data-target="' + selectedValue + '"]');

  // 添加动画类
  $targetIngredient.addClass('animate__animated animate__heartBeat');

  // 2秒后移除类，直接用之前保存的目标元素引用
  setTimeout(function() {
    $targetIngredient.removeClass('animate__animated animate__heartBeat');
  }, 2000);
});

场景2：用索引关联（如果元素顺序一一对应） #

如果下拉框的选项顺序和.ingradient元素的顺序完全一致，可以用索引来匹配：

$('.tt-select').change(function(){  
  const $currentSelect = $(this);
  // 获取选中option的索引
  const selectedIndex = $currentSelect.find(':selected').index();
  // 找到对应索引的.ingradient元素
  const $targetIngredient = $('.ingradient').eq(selectedIndex);

  $targetIngredient.addClass('animate__animated animate__heartBeat');

  setTimeout(function() {
    $targetIngredient.removeClass('animate__animated animate__heartBeat');
  }, 2000);
});

为什么之前的尝试失败？ #

• 你之前在setTimeout的回调里用$(this)，这里的this已经不是触发事件的下拉框了，而是window对象，自然找不到目标元素。
• $('.ingradient', this)是在下拉框内部查找元素，但你的.ingradient是外部元素，所以这个选择器根本找不到任何元素。

只要根据你的实际DOM结构调整匹配.ingradient的方式，就能实现只操作当前选中项对应的元素啦～

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