本文介绍如何使用 jQuery 为页面中多个具有相同 class 的容器（如 .summary 和 .description-read-more）实现彼此隔离的“Read More / Read Less”交互，避免点击一个按钮影响所有容器。核心在于利用 $(this) 动态定位当前操作元素及其关联 DOM 节点。
本文介绍如何使用 jquery 为页面中多个具有相同 class 的容器（如 `.summary` 和 `.description-read-more`）实现彼此隔离的“read more / read less”交互，避免点击一个按钮影响所有容器。核心在于利用 `$(this)` 动态定位当前操作元素及其关联 dom 节点。
在实际开发中，我们常需复用结构相同的组件（例如商品摘要卡片），每个卡片都包含一段可折叠文本和一个触发按钮。若直接对全局选择器（如 $('.summary')）进行统一操作，会导致所有卡片同步展开或收起——这显然违背用户预期。
解决的关键在于：事件处理函数内部必须基于 $(this) 进行局部作用域查找，而非依赖初始化时缓存的全局 jQuery 对象。原代码中 productDescription 和 autoHeight 等变量在 DOM 准备就绪时即被一次性计算，无法响应不同容器的个体差异；而修正后的逻辑将这些计算移入 click 回调内，并通过 $(this).prev() 精准定位当前按钮所对应的 .summary 元素。
以下是优化后的完整实现：
jQuery(document).ready(function($) {
$('.description-read-more').click(function() {
// ✅ 动态获取当前按钮关联的 summary 容器（假设其紧邻前一个兄弟元素）
var $summary = $(this).prev('.summary');
// ✅ 动态计算当前容器的高度参数
var currentHeight = $summary.height();
var autoHeight = $summary.css('height', 'auto').height();
$summary.css('height', currentHeight); // 恢复初始高度，避免样式残留
var $textMore = $(this).find('.text_more');
var showMoreText = 'Read More';
var showLessText = 'Read Less';
if ($(this).hasClass('active')) {
// 收起：恢复初始高度
$(this).removeClass('active');
$summary.removeClass('active');
$summary.animate({ height: currentHeight }, 200);
$textMore.text(showMoreText);
} else {
// 展开：动画至自动高度
$(this).addClass('active');
$summary.addClass('active');
$summary.animate({ height: autoHeight }, 200);
$textMore.text(showLessText);
}
});
});? HTML 结构要求（关键！）
为确保 $(this).prev('.summary') 准确匹配，请保持每组 .summary 与 .description-read-more 相邻且顺序固定：
<div class="summary"> <p><strong>Description:</strong></p> <p>Initial content...</p> <p>Additional details that are initially hidden.</p> </div> <div class="description-read-more"><span class="text_more">Read More</span></div> <!-- 第二组（可重复任意次数） --> <div class="summary"> <p><strong>Description:</strong></p> <p>Another product's summary...</p> </div> <div class="description-read-more"><span class="text_more">Read More</span></div>
⚠️ 注意事项：
- 若 .summary 与按钮之间存在其他元素，应改用更鲁棒的查找方式，例如：$(this).closest('.card').find('.summary')（需配合合理父容器结构）；
- 高度动画建议添加 overflow: hidden 到 .summary 以防止内容溢出；
- 为提升可访问性，建议为按钮添加 aria-expanded 属性并动态切换；
- 现代项目推荐使用原生 JavaScript 或 CSS max-height 过渡替代 jQuery 动画，但本方案兼容性高、逻辑清晰，适合快速迭代场景。
通过将作用域控制从“全局静态绑定”转为“事件驱动的局部查找”，即可轻松实现多实例组件的独立交互行为——这是前端开发中处理重复 DOM 结构的通用范式。
