本文讲解如何通过 jQuery 精准控制每个 .card 区域的文本方向（LTR/RTL），避免全局切换；核心是利用 $(this).closest('.card') 定位当前按钮所属卡片，实现局部状态隔离。
本文讲解如何通过 jquery 精准控制每个 `.card` 区域的文本方向（ltr/rtl），避免全局切换；核心是利用 `$(this).closest('.card')` 定位当前按钮所属卡片，实现局部状态隔离。
在多卡片（如 .card）并存的页面中，若所有“RTL 切换按钮”共用同一套 DOM 查询逻辑（如 $('.code__example')），点击任一按钮将影响全部卡片——这违背了组件化、独立交互的设计原则。正确的做法是：基于事件源（即被点击的按钮 this）向上查找其最近的父级 .card 容器，再在此范围内操作目标元素。
以下是优化后的 jQuery 实现（兼容性好、语义清晰、无冗余操作）：
$(".btn__rtl").on("click", function () {
const $button = $(this);
const $card = $button.closest('.card'); // ✅ 精准定位所属卡片
const $codeExample = $card.find('.code__example');
// 切换 direction 属性与类名，保持语义一致性
const currentDir = $codeExample.prop('dir');
const newDir = currentDir === 'rtl' ? 'ltr' : 'rtl';
$codeExample
.prop('dir', newDir)
.toggleClass('rtl-active', newDir === 'rtl');
$button.text(newDir.toUpperCase()); // 同步按钮文案：LTR / RTL
});✅ 关键改进点说明：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
- 使用 .closest('.card') 替代全局选择器，确保作用域隔离；
- 用 .prop('dir') 读写 dir 属性（语义正确，比 .attr() 更适合布尔/枚举属性）；
- .toggleClass('rtl-active', condition) 显式控制类名，避免状态错乱；
- 按钮文案动态更新为对应方向大写（LTR / RTL），提升可访问性与用户体验。
? 注意事项：
- CSS 中应优先使用 [dir="rtl"] .text 这类属性选择器进行样式控制，而非仅依赖 .rtl-active 类——这样即使 JS 失效或未加载，纯 CSS 仍能提供基础 RTL 支持；
- 若需支持原生 <html dir> 全局切换，建议将卡片级方向逻辑与全局逻辑解耦，避免冲突；
- 在现代项目中，推荐逐步迁移到原生 JavaScript（如 event.currentTarget.closest() + Element.toggleAttribute()），减少 jQuery 依赖。
该方案简洁、健壮、可复用，是处理多实例方向切换问题的最佳实践之一。
