Stimulus JS：跨元素切换类报错，需实现多元素控制numpad显隐

1. 修改Stimulus控制器代码 #

调整控制器逻辑，通过targets指定要切换显示的numpad元素，避免操作controller自身的类：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static classes = ["change"]
  static targets = ["numpad"]

  toggle() {
    this.numpadTarget.classList.toggle(this.changeClass)
  }
}

2. 更新HTML结构 #

• 保留data-controller在amount_container上，确保事件绑定不会随numpad隐藏而失效
• 给amount_box添加点击事件，触发toggle方法
• 标记numpad为控制器的target元素
• 将data-toggle-change-class放在controller所在元素上，符合Stimulus的规则

<div id="amount_container" data-controller="toggle" data-toggle-change-class="hidden">
  <div id="amount_box" data-action="click->toggle#toggle">
    <div>$999,999.99</div>
  </div>
  <div id="numpad" data-toggle-target="numpad">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    ...
    <div data-action="click->toggle#toggle">Next</div>
  </div>
</div>

3. 补充CSS隐藏类规则 #

需要在样式中定义hidden类的行为：

.hidden {
  display: none;
}

核心逻辑说明 #

• 用Stimulus的targets精准定位numpad元素，确保只切换目标区域的显示状态
• 事件绑定在amount_container层级下，即使numpad被隐藏，点击amount_box仍能触发切换
• data-toggle-change-class与controller同元素，满足Stimulus的属性绑定要求，同时不会影响容器本身的显示

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