Railsで日付のあるカードを選択した後にクラスの表示を変更する

概要

私は馬術学校向けのアプリケーションを開発しています。これにより、馬術学校がクラスを編成し、誰がクラスを予約したかなどを確認できるようになります。

全授業の表示において、見たい日を選択して、その日の授業を表示できるように作成しました。

ただし、これをどうやって実現すればよいのかわかりません。

カードを選択するためにスティミュラス 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")
  }
}```

解決策

この場合、イベントからターゲットを取得する方が良いでしょう。

dataSelected(event) {
  event.currentTarget.classList.toggle("background-change")
}

https://translate.google.com/translate?hl=ja&sl=en&tl=ja&u=https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

便利なログを記録するデバッグ モードをオンにすることもできます。

// app/javascript/controllers/application.js

import { Application } from "@hotwired/stimulus"

const application = Application.start()

// Configure Stimulus development experience
application.debug = true                      // <= here
window.Stimulus   = application

export { application }