在 Rails 中选择带有日期的卡片后更改课程显示

Question

我正在为马术学校开发一个应用程序，以便他们可以组织课程并查看谁预订了课程等等！

在所有课程的显示中，我创建了来帮助用户选择他们想要查看的日期，然后显示设置日期的课程。

但是，我不知道如何实现这一点。

我使用刺激 JavaScript 来选择一张卡，但是无论我点击哪里，它总是选择同一张卡。我看到了一些使用 DatePicker 的建议，但这只会让我更加困惑。

所以想请教一下大家一些建议。这是我当前的代码：

这是我在索引页上呈现的卡片部分：

<div class="d-flex justify-content-start overflow-banner" data-controller="book-class">
  <% Date.today.all_month.to_a.each do |day| %>
    <div
      class="border-div card d-flex justify-content-center col-2 date-banner-card mx-3"
    >
      <div
        class="d-flex flex-column card-body justify-content-center align-items-center"
        data-action="click->book-class#dataSelected"
        data-book-class-target="card"
      >
        <h2>
          <%= day.strftime("%d") %>
        </h2>
        <p>
          <%= day.strftime("%b") %>
        </p>
      </div>
    </div>
  <% end %>
</div>

这是我现在的书本级控制器。 免责声明这只是为了看看我是否已连接，以及看看我是否可以在选择时更改颜色

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")
    console.log(this.cardTarget)
  }

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

  dataSelected() {
    console.log("Selected")
    this.cardTarget.classList.toggle("background-change")
  }
}```

Answer 1

日期可以用作

dataSelected(day)

函数的参数。它必须与目标html元素的id一致。