我正在 Ruby on Rails 上制作我的第一個個人專案（以及我在 Stack Overflow 上的第一篇文章！）。
我想為 Mac 和 Ubuntu 用戶實作一個帶有專用鍵盤快捷鍵的“生產力”頁面。cf :專案圖片
目標是單擊 Mac / Linux 按鈕并顯示每個作業系統的快捷方式版本。我使用 Stimulus JS 在按鈕上添加了一個資料控制器/目標/動作，當單擊它時添加/洗掉一個活動類或禁用隱藏非活動卡的類。
我的問題是第二個、第三個等“文章”的按鈕總是鏈接到第一個。所以當點擊時，它仍然會改變第一篇文章而不是第二篇文章的顯示。
我不知道是否有辦法將每個按鈕與其相關文章與 Stimulus 分開？
我的代碼如下所示：
看法 ：
<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")
}
}
uj5u.com熱心網友回復：
你的data-controller-os-buttons 標簽在哪里？您似乎有多個目標名稱相同的目標，因此單擊按鈕可能只會更改第一個目標。將控制器放在每組按鈕上。
<div class="article-code" data-controller="os-buttons">
那應該只對按鈕集采取行動
如果您的控制器在您顯示的代碼之前，則您有多個目標（陣列）并且需要確定索引單擊了哪個目標。可行，但多個控制器應該可以作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/495308.html
標籤：javascript 轨道上的红宝石 红宝石 刺激
上一篇：洗掉帶括號的子運算式