javascript - 如何在stimulus.js中获取元素的类

Question

我想切换元素，我需要一个类名。如何在stimulus.js 中获取嵌套元素的类名并进行更改？FI，我需要切换最初隐藏的“ul”元素。

div data-controller="my_controller"
  a data-action="click->my_controller#toggle_my_elements"
    | Click
  ul.is-hidden id="my-id" data-target="my_controller.mytext"
    li
      | Text to be toggled.

在刺激控制器中，我有：

import { Controller } from 'stimulus'

export default class extends Controller {
  static targets = ["mytext"]
  toggle_my_elements(){
    console.log("debuggin")  //Ok
    const class_name = this.mytextTarget.className
  }
}

我试图调用一个 js 函数className，但似乎 js 函数不像以前那样工作。我只是不知道如何得到它。

Answer 1

由于 StimulusJS目标是一个HTML 元素，您可以使用它的classList属性

this.mytextTarget.classList.remove('is-hidden')

Answer 2

您可以执行以下操作来获取ul课程：

static targets = [ "mytext" ]

connect() {
  this.mytextClass = this.data.get("class") || "is-hidden"
}

然后使用以下动作描述符来切换您的ul元素

toggle(event) {
  event.preventDefault();

  this.mytextTargets.forEach(target => {
    target.classList.toggle(this.mytextClass)
  })
}

Answer 3

你试过element[:class]吗？这就是我从 ruby​​ 中的 Stimulus Reflex 访问 html 元素的类的方式，因为element.class返回元素的类（StimulusReflex::Element）而不是我期望的“btn btn-primary”字符串。