js中的for循环中的addEventListener

Question

我正在尝试在答案块上创建一个 for loop 我想让答案的高度为 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

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

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 2

首先要使用DOM事件，在节点中添加class列表切换。您必须区分 Dom 事件和 Dom 风格。我在 w3schools 中找不到 DOM 事件切换。 https://www.w3schools.com/jsref/dom_obj_event.asp

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

Answer 3

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

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

另外据我所知，toggle 事件仅适用于 <details> 元素。对此的标准方法是改为处理“点击”事件，并使用 classList.toggle() 函数打开和关闭元素上的 class。

演示：

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>

js中的for循环中的addEventListener

addEventListener in a for loop in js

javascript

dom

for-loop

dom-events