如何使用类名来改变元素的显示？

Question

坦白说，我不知道 javascript 是如何工作的。我希望有人能告诉我如何让它真正发挥作用。

我想做的是使用元素的类名将其显示更改为“无”，并将下一个同级元素的显示更改为“阻止”单击。我使用类名是因为我希望它适用于具有该类的任何元素。有人请告诉我我做错了什么吗？

CSS

.box {
  position: relative;
  top: 0px;
  width: 150px;
  height: 150px;
  color: #fff;
  cursor: pointer;
}

#box {
  background-color: green;
}

#box2 {
  display: none;
  background-color: blue;

HTML

 <div class="box" id="box" onclick="myFunction()">
      <p>text text text text text</p>
 </div>
 <div class="box" id="box2">
      <p>text text text text text text text text text text</p>
 </div>

JS

function myFunction() {
     if (element.hasClass("box")) {
     this.element.style.display = "none";
     nextElementSibling.style.display = "block";
    }
}

抱歉，如果这很愚蠢，我不知道我在做什么。

Answer 1

让我

AsyncAwait

，我有一些（？）想法 javascript 是如何工作的。我希望这可以向您展示如何让它真正发挥作用。

我没有在 HTML 中内联分配函数，而是在 js 中分配它。然后，我可以使用

this.element

，而不是使用

event.currentTarget

引用元素。这将确保我们在分配了事件侦听器的元素上触发事件。现在我们不需要检查它是否具有所需的类。

为了清楚起见，我将元素存储到变量中。

我将显示设置为无，抓取下一个元素，并将其显示更改为阻止（它已经是阻止的，所以它并没有真正改变任何东西）。

希望这能增加一些清晰度！如果您有任何疑问，请随时询问<3

function myFunction(event) {
  const element = event.currentTarget;
  element.style.display = "none";
  const nextElement = element.nextElementSibling;
  nextElement.style.display = "block";
}

document.getElementById("box")
  .addEventListener("click", myFunction);

<div class="box" id="box">
  <p>
    text text text text text
  </p>
</div>
<div class="box" id="box2">
  <p>
    text text text text text text text text text text
  </p>
</div>