Stimulus JS多卡片切换按钮作用域失效问题求解

Stimulus 以data-controller属性挂载的DOM节点作为独立作用域边界，控制器内通过this.xxxTarget查找元素时，只会检索当前控制器挂载节点下的子元素，不会跨节点匹配。
你的代码没有给每个独立的快捷键卡片绑定单独的控制器实例，所有按钮触发事件后，都会匹配到页面上第一组linux/mac target，因此点击后续卡片的按钮只会修改第一个卡片的展示状态。
另外你的初始类名存在笔误：Linux内容块初始类写的是activate，和JS逻辑中操作的active类名不匹配，会导致初始加载样式异常。

1. 修改视图层代码，给每个卡片绑定独立控制器 #

将data-controller="os-buttons"属性添加到每个卡片的.article-code容器上，为每个快捷键块生成独立的控制器实例，实现作用域隔离。修正后的视图代码如下：

<div class="article-cards">
  <% @productivity.article.each do |article| %>
    <div class="article-card">
      <div class="article-content">
        <h3><%= article.title%></h3>
        <p><%= article.description%></p>
        <% if article.category == "code" %>
        <!-- 每个代码块挂载独立的os-buttons控制器实例 -->
        <div class="article-code" data-controller="os-buttons">
          <div class="article-code-buttons">
            <button class="btn-article" data-action="click->os-buttons#showLinux">Linux</button>
            <button class="btn-article" data-action="click->os-buttons#showMac">Mac</button>
          </div>
          <div class="article-code-content">
            <div class="article-code-content-linux active" data-os-buttons-target="linux">
              <p>Test Linux</p>
            </div>
            <div class="article-code-content-mac disable" data-os-buttons-target="mac">
              <p>Test Mac</p>
            </div>
          </div>
        </div>
        <% end %>
      </div>
    </div>
  <% end %>
</div>

2. 原有控制器逻辑无需调整 #

完成上述视图修改后，每个控制器实例只会查找自身挂载节点下的linux/mac target，点击按钮时只会修改当前所属卡片的类名状态，不会出现跨卡片干扰的问题。

可以将重复的类名切换逻辑抽离为私有方法，精简代码：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["linux", "mac"]

  showMac() {
    this._switchActiveOs("mac")
  }

  showLinux() {
    this._switchActiveOs("linux")
  }

  _switchActiveOs(activeOs) {
    ["linux", "mac"].forEach(os => {
      const el = this[`${os}Target`]
      el.classList.toggle("active", os === activeOs)
      el.classList.toggle("disable", os !== activeOs)
    })
  }
}

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