关于刺激JS的问题，试图添加按钮，当点击活动页面时隐藏/显示内容

Question

我正在做我的第一个关于Ruby on Rails的个人项目(以及我关于Stack Overflow的第一篇文章!)

我想实现一个"生产力";带有Mac专用快捷键的页面Ubuntu用户。Cf:项目图片

目标是点击Mac/Linux按钮并显示每个操作系统的快捷版本。我使用了Stimulus JS在按钮上添加了一个数据控制器/目标/动作，当点击它时，添加/删除一个active或disable类，它隐藏了非活动卡片。

我的问题是第二，第三，等等文章的按钮总是连接到第一个on上。所以当点击时，它仍然会改变第一篇文章的显示，而不是第二篇。

我不知道是否有办法将每个按钮与其相关的文章与刺激物分开?

我的代码是这样的:

视图:

<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" %>
<div class="article-code">
<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 activate" 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>

JS控制器:

import { Controller } from "@hotwired/stimulus"
// Connects to data-controller="os-buttons"
export default class extends Controller {
static targets = ["linux", "mac"]
connect() {
}
showMac() {
this.linuxTarget.classList.remove("active")
this.linuxTarget.classList.add("disable")
this.macTarget.classList.remove("disable")
this.macTarget.classList.add("active")
}
showLinux() {
this.macTarget.classList.remove("active")
this.macTarget.classList.add("disable")
this.linuxTarget.classList.remove("disable")
this.linuxTarget.classList.add("active")
}
}

Answer 1

您的data-controller-os-buttons标签在哪里?您似乎有多个具有相同目标名称的目标，因此单击按钮可能只会更改第一个目标。把控制器放在每组按钮上。

<div class="article-code" data-controller="os-buttons">

应该只对一组按钮起作用

如果你的控制器在你显示的代码之前，你有多个目标(数组)，需要找出哪个目标被索引点击了。可行，但多个控制器应该可以工作。