在Rails中实现选择日期卡片后切换课程显示的方案咨询

你遇到的核心问题是：所有日期卡片点击后都会操作同一个元素，这是因为Stimulus的单数cardTarget只会返回第一个匹配的目标元素，不管点击哪张卡片，代码里操作的都是第一张。

修复方案 #

修改Stimulus控制器的dataSelected方法，通过事件对象获取当前点击的具体卡片，替代固定调用this.cardTarget的逻辑：

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="book-class"
export default class extends Controller {
  static targets = ["toggle", "card"]

  connect() {
    console.log("You're connected")
  }

  booked() {
    console.log("you're booked")
  }

  dataSelected(event) {
    console.log("Selected")
    // 获取当前触发点击的卡片元素
    const activeCard = event.currentTarget
    
    // 单选模式：先清除其他卡片的选中状态（需要单选则保留，多选则删除这段）
    this.cardTargets.forEach(card => {
      if (card !== activeCard) {
        card.classList.remove("background-change")
      }
    })
    
    // 切换当前卡片的选中样式
    activeCard.classList.toggle("background-change")
  }
}

代码说明 #

1. event.currentTarget：精准定位当前被点击的卡片元素，解决了原代码固定操作第一个卡片的问题。
2. 单选/多选控制：保留遍历清除代码则为单选模式（同一时间仅一个日期被选中），删除这段代码则为多选模式（可同时选中多个日期）。
3. HTML部分无需修改，你通过循环生成的卡片已经正确绑定了Stimulus的target和点击事件。

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