点击类选择器DOM元素时，如何仅修改当前点击元素的innerHTML？

你的问题很典型——这是因为你在点击回调里用全局选择器$(".caretUD")选中了页面上所有带这个类的元素，所以一点击就会把所有同class的元素都改了。完全不需要给每个元素加独立ID，用this就能轻松限定作用域到被点击的元素上。

核心思路 #

在jQuery的点击事件回调里，this指代的就是当前被点击的那个按钮元素。我们可以基于它来定位对应的.caretUD元素，而不是全局搜索。

修改后的代码 #

$("button.accordion").click(function(){
  // 仅获取当前点击按钮内的.caretUD元素
  const $targetCaret = $(this).find(".caretUD");
  
  // 切换图标状态
  if ($targetCaret.html() === "▼") {
    $targetCaret.html("▲");
  } else {
    $targetCaret.html("▼");
    console.log("切换为向下箭头啦");
  }
});

细节说明 #

• $(this).find(".caretUD")：只会在当前被点击的按钮的后代元素里查找.caretUD，精准定位到你要修改的那个图标，不会影响其他按钮里的元素。
• 如果.caretUD是按钮的直接子元素，用$(this).children(".caretUD")效率会更高，但find()适配更多嵌套场景，通用性更强。
• 你之前的判断逻辑有点小问题：if ($(".caretUD").html("▼"))其实是在给所有元素赋值，然后判断赋值后的jQuery对象（永远为真），所以else分支永远不会触发。上面的代码改成先获取元素，再判断当前的HTML内容，逻辑才是正确的。

这样修改后，点击哪个按钮，就只会修改那个按钮里的箭头图标，完全不需要给元素加独立ID，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者luke.potter