如何用jQuery/JS实现独立控制的LTR/RTL切换类及属性？

问题根源 #

你之前的代码里，点击按钮时会选中页面所有的.code__example和.btn__rtl元素，自然会导致所有卡片一起切换方向。另外用了冗余的自定义类和!important，既不规范也增加了维护成本。

优化后代码实现 #

HTML（仅做小调整） #

<main>
  <section class="card">
    <div>
      <button class="btn btn__dir-toggle">RTL</button>
    </div>
    <div class="code__example" dir="ltr">
      <h3 class="text">Button Close</h3>
    </div>
  </section>
   <section class="card">
    <div>
      <button class="btn btn__dir-toggle">RTL</button>
    </div>
    <div class="code__example" dir="ltr">
      <h3 class="text">Button Close</h3>
    </div>
  </section>
</main>

• 给.code__example默认加上dir="ltr"，明确初始方向
• 按钮类名改成btn__dir-toggle，语义更清晰

Sass（简化样式，移除冗余代码） #

main {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}
.card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 10px;
  background-color: #f9f9f9;
  margin: 40px 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0.8em 1.2em;
  line-height: 1;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease-out;
  overflow: hidden;
}
.text {
  text-align: left;
}
/* 用原生dir属性控制文本对齐，不用额外类 */
.code__example[dir="rtl"] .text {
  text-align: right;
}
/* 给方向切换加过渡动画 */
.code__example {
  transition: direction 0.3s ease;
}

• 删掉.rtl-active类和!important，直接用HTML原生dir属性控制方向，更符合规范
• 简化过渡动画，去掉没必要的延迟

jQuery 版本（精准控制当前卡片） #

$(".btn__dir-toggle").on("click", function() {
  // 找到当前按钮所在卡片里的目标元素
  const $targetExample = $(this).closest(".card").find(".code__example");
  const currentDir = $targetExample.attr("dir");
  
  // 切换方向
  const newDir = currentDir === "ltr" ? "rtl" : "ltr";
  $targetExample.attr("dir", newDir);
  
  // 更新按钮上的文字
  $(this).text(newDir.toUpperCase());
});

原生JS 版本（不用jQuery也能跑） #

document.querySelectorAll(".btn__dir-toggle").forEach(btn => {
  btn.addEventListener("click", function() {
    const targetExample = this.closest(".card").querySelector(".code__example");
    const currentDir = targetExample.getAttribute("dir");
    const newDir = currentDir === "ltr" ? "rtl" : "ltr";
    
    targetExample.setAttribute("dir", newDir);
    this.textContent = newDir.toUpperCase();
  });
});

核心优化点 #

• 精准定位：用closest(".card")锁定当前按钮所在的卡片，确保操作只影响这一个卡片，不会波及其他
• 语义化规范：用HTML原生的dir属性控制文字方向，替代自定义类，既标准又好维护
• 简化逻辑：去掉冗余的样式和JS代码，减少不必要的复杂度
• 独立状态：每个卡片的方向完全独立，支持页面同时存在LTR和RTL两种布局

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