本文讲解如何通过 jquery 精准控制点击按钮所在的卡片（而非全页）的文本方向，实现独立的 ltr/rtl 切换，并优化 dom 查询与属性操作逻辑。

本文讲解如何通过 jquery 精准控制点击按钮所在的卡片（而非全页）的文本方向，实现独立的 ltr/rtl 切换，并优化 dom 查询与属性操作逻辑。

在多卡片布局中，若所有 .btn__rtl 按钮共用同一套全局切换逻辑（如 $(".code__example").toggleClass(...)），会导致所有卡片同步响应，违背“按需切换”的交互预期。根本解法是：基于事件源（this）向上定位所属卡片，再向下精确作用于该卡片内的目标元素。

以下是优化后的 jQuery 实现（推荐使用 .prop() 操作 dir 属性，语义更准确，且兼容性优于 .attr()）：

$(".btn__rtl").on("click", function(e) {
  const $button = $(this);
  // 向上查找最近的 .card 容器，再查找其内部的 .code__example
  const $targetExample = $button.closest('.card').find('.code__example');

  // 切换方向类（用于 CSS 强制 direction）
  $targetExample.toggleClass('rtl-active');

  // 读取并切换 dir 属性值
  const currentDir = $targetExample.prop('dir');
  if (currentDir === 'rtl') {
    $targetExample.prop('dir', 'ltr');
    $button.text('RTL'); // 按钮文案同步更新（注意：text() 比 html() 更安全）
  } else {
    $targetExample.prop('dir', 'rtl');
    $button.text('LTR');
  }
});

✅ 关键优化点说明：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

• 精准作用域：$button.closest('.card') 确保只影响当前按钮所在卡片，避免跨卡片干扰；
• 语义化属性操作：使用 .prop('dir', ...) 而非 .attr()，因 dir 是原生 DOM 属性（property），.prop() 可正确反映实时状态；
• 安全文本更新：用 .text() 替代 .html() 设置按钮文字，防止 XSS 风险且语义更清晰；
• 无冗余查询：避免重复调用 document.querySelector 或全局选择器，全部基于事件上下文链式获取。

? 配套 CSS 建议（精简可靠）：

.code__example {
  &.rtl-active,
  &[dir="rtl"] {
    direction: rtl !important;
  }
}
// 保证 .text 在 RTL 下右对齐（无需依赖父级 dir，更健壮）
[dir="rtl"] .text,
.code__example.rtl-active .text {
  text-align: right;
}

⚠️ 注意事项：

• 若页面需支持原生 RTL（如阿拉伯语用户），建议优先使用 全局声明，局部覆盖仅用于演示或调试；
• .closest() 要求 HTML 结构稳定（即按钮必须位于 .card 内），若结构复杂，可配合 data-card-id 等自定义属性增强鲁棒性；
• 纯 JavaScript 版本（无 jQuery 依赖）同样简洁：

  document.querySelectorAll('.btn__rtl').forEach(btn => {
    btn.addEventListener('click', () => {
      const card = btn.closest('.card');
      const example = card.querySelector('.code__example');
      example.classList.toggle('rtl-active');
      example.dir = example.dir === 'rtl' ? 'ltr' : 'rtl';
      btn.textContent = example.dir === 'rtl' ? 'LTR' : 'RTL';
    });
  });

通过以上方案，每个卡片均可独立控制文本方向，代码更可维护、性能更优、语义更清晰——这才是面向组件化思维的正确实践。