js中for循环中的addEventListener

Question

我正在尝试在答案块上创建一个 for 循环，我想让答案的高度为 30px 我尝试将事件添加到块中，但它不起作用我，那为什么？

这是我的解决方案：

HTML 代码：

<div class="blocks block-1">
    <div class="questionContainer">
        <div class="questions">How many team members can I invite?</div>
        <div class="answers">
            You can invite up to 2 additional users on the Free plan. There is
            no limit on team members for the Premium plan.
        </div>
    </div>
</div>
<div class="blocks block-2">
    <div class="questionContainer">
        <div class="questions">What is the maximum file upload size?</div>
        <div class="answers">
            No more than 2GB. All files in your account must fit your allotted
            storage space.
        </div>
    </div>
</div>

JavaScript 代码：

const block = document.getElementsByClassName(".blocks");
const answers = document.getElementsByClassName(".answers");

for (i = 0; i < block.length; i++) {
    block[i].addEventListener("click", () => {
        answers[i].style.height = "30px";
    });
}

Answer 1

answers也是一个集合（就像block一样），所以不能直接在上面设置样式。但是对于您的情况，无论如何查看整个系列并没有多大意义。

如果您想在切换块内的answers 元素上设置样式，您需要专门选择它。

同样，toggle 事件仅适用于<details> 元素。解决此问题的标准方法是改为处理“单击”事件，并使用 classList.toggle() 函数在元素上打开和关闭类。

演示：

const blocks = document.querySelectorAll(".blocks");

for (i = 0; i < blocks.length; i++) {

  blocks[i].addEventListener("click", function(e) {
      let answer = this.querySelector(".answers");
      answer.classList.toggle("hidden");
  });
}

.answers
{
  height:30px;
}

.hidden
{
 display:none;
}

<div class="blocks block-1">
  <div class="questionContainer">
    <div class="questions">How many team members can I invite?</div>
    <div class="answers hidden">
      You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.
    </div>
  </div>
</div>
<div class="blocks block-2">
  <div class="questionContainer">
    <div class="questions">What is the maximum file upload size?</div>
    <div class="answers hidden">
      No more than 2GB. All files in your account must fit your allotted storage space.
    </div>
  </div>
</div>

Answer 2

我猜你正在寻找这个结果？

const All_blocks = document.querySelectorAll('.blocks');

All_blocks.forEach( blk =>
  {
  blk.addEventListener('click', () =>
    {
    blk.classList.toggle('show_answer')
    })
  })

.blocks {
  margin  : .5em;
  padding : .3em;
  }
.questions {
  color  : darkblue;
  cursor : pointer;
  }
.blocks .answers  {
  visibility: hidden;
  }
.blocks.show_answer .answers {
  visibility: visible;
  }

<div class="blocks block-1">
  <div class="questionContainer">
    <div class="questions">How many team members can I invite?</div>
    <div class="answers">
      You can invite up to 2 additional users on the Free plan. 
      There is no limit on team members for the Premium plan.
    </div>
  </div>
</div>
<div class="blocks block-2">
  <div class="questionContainer">
    <div class="questions">What is the maximum file upload size?</div>
    <div class="answers">
      No more than 2GB. All files in your account must fit your 
      allotted storage space.
    </div>
  </div>
</div>

Answer 3

首先要使用 DOM 事件，在 NODE 中添加 classList 切换。您必须区分 Dom 事件和 Dom 样式。我在 w3schools 中找不到 DOM 事件切换。 https://www.w3schools.com/jsref/dom_obj_event.asp

编辑： 我为您尝试使用 console.log(blocks) document.getElementsByClassName(".blocks")。 DOM 节点有 2 个类和结果 HTMLCollection emty。您必须使用 querySelectorAll