小编pin*_*d90的帖子

我正在使用div需要可点击的卡片形状。我使用 JS (stimulusJS) 向EventListener它们添加 ，以便当用户单击卡片时，事件侦听器被触发，添加一些 CSS 类并使用来自 s divdataSet 的数据填充一些隐藏字段。

卡片

<div class="card d-flex flex-column data-selectable-target="selectable" data-pricing-model-value="flat_fee">
   <div class="self-end">
      <strong>
        <span class="mr-3" data-toggle="tooltip" title="<%= t(".tooltip") %>"><%= icon("exclamation-circle", classes: "h-4 w-4") %></span>
      </strong>
   </div>
   <h5><%= t(".title") %></h5>
   <p> <%= t(".description") %></p>
</div>

JS控制器

import { Controller } from 'stimulus';

export default class extends Controller {
  static targets = ["selectable"]

  connect() {
    this.selectableTargets.forEach((element) => {
      element.addEventListener("click", (event) => {
        this.select(event.target);
      });
    })
  }

  select(element) {
    element.classList.add("selected")
    this.selectableTargets.forEach((target) …