如何编写切换脚本使其仅作用于网站指定区域？

问题场景 #

当前点击.showAll按钮时，全局所有.newsTextCont元素都会被添加/移除.openNewsText类，导致所有新闻文本同时展开或收起。需要实现仅当前点击区域内的文本切换，且全程不使用ID，仅通过类选择器保证功能可复用。

解决方案 #

利用jQuery的DOM遍历方法，基于点击元素的位置精准定位到所属的父级容器，避免全局选择。具体来说：

• 使用closest('.newsTextCont')从点击的.showAll元素向上查找，找到最近的.newsTextCont父容器
• 仅对这个找到的容器进行类切换操作

修改后的代码 #

JavaScript（核心修改） #

$('.showAll').click(function() {
  // 仅定位当前点击按钮所属的.newsTextCont容器
  $(this).closest('.newsTextCont').toggleClass("openNewsText");
  $(this).toggleClass('newsToggle');
});

额外优化 #

原HTML中第一个.showAll元素的id="showAll"可以直接删除，因为现在完全不需要ID来区分元素。

逻辑说明 #

• $(this)指代当前被点击的.showAll元素
• closest('.newsTextCont')会向上遍历DOM树，找到第一个匹配.newsTextCont的父元素，确保只操作当前新闻条目内的容器
• 这种方式完全依赖类选择器，新增任意数量的新闻条目后，功能都会自动复用，无需额外修改代码

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