js中for回圈中的addEventListener

我正在嘗試在答案塊上創建一個 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";
    });
}

uj5u.com熱心網友回復：

answers也是一個集合（就像block），所以不能直接在上面設定樣式。但是對于您的情況，無論如何查看整個集合并沒有多大意義。

如果要answers在切換塊內的元素上設定樣式，則需要專門選擇它。

另外 AFAIK 該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>

uj5u.com熱心網友回復：

我想你正在尋找這個結果？

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>

uj5u.com熱心網友回復：

首先要使用 DOM 事件，請在節點中添加 classList 切換。您必須區分 Dom 事件和 Dom 樣式。我在 w3schools 中沒有找到 DOM 事件切換。 https://www.w3schools.com/jsref/dom_obj_event.asp

編輯：我為你的 document.getElementsByClassName(".blocks") 嘗試 console.log(blocks)。DOM 節點有 2 個類和結果 HTMLCollection emty。您必須使用 querySelectorAll

標籤：javascript for循环 dom dom事件

上一篇：如何使用純javascript從精靈表中提取精靈

下一篇：Javascript“document.write”混淆