如何使用jQuery仅切换当前对应div的显隐，而非所有同类匹配元素

问题原因 #

直接使用全局类选择器匹配元素时，会选中页面内所有对应类名的元素，没有限定查找范围，才会出现点击一个按钮触发所有模块切换的问题。

解决方法 #

利用this获取当前触发点击事件的按钮，再通过.closest()方法找到它所属的.toggle_text_button父容器，之后所有元素查找都限定在这个父容器内即可。原有HTML结构不需要做任何修改，直接替换JS代码即可生效。

修改后的jQuery代码如下：

jQuery(document).ready(function () {
  jQuery(".btn_txt_after_click, .btn_txt_before_click").on("click", function (e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 定位当前点击按钮所属的切换模块容器
    const $currentGroup = jQuery(this).closest(".toggle_text_button");
    // 仅在当前容器内查找元素切换
    $currentGroup.find(".long_txt, .short_txt").toggle("slow");
    $currentGroup.find(".btn_txt_before_click, .btn_txt_after_click").toggle("slow");
  });
});

优化说明 #

• 合并了两个按钮的点击事件，减少冗余代码
• 新增e.preventDefault()阻止a标签的默认跳转行为，避免点击后页面回到顶部
• 所有元素操作都限定在当前触发事件的模块内，不会影响其他同结构的模块

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