javascript - 显示/隐藏具有相同类名的多个 Div (javascript)

Question

我搜索过相同的问题，但只找到了 jQuery 解决方案，但我想只使用 JS 来解决。

我有多个具有相同类名的 div 和多个 a 标签。我希望当用户按下与 div 关联的 a 元素时显示信息。

这是我的函数。我创建了 2 个循环:一个用于 a 元素，第二个用于 divs。

function toggle() {
  	var ele = document.getElementsByClassName("toggleText");
  	var btn = document.getElementsByClassName("displayText");
    for(var i=0; i<btn.length; i++){
      for(var j=0; j<ele.length; j++){
    btn[i].onclick = function(){
  	if(ele[j].style.display == "none") {
      		ele[j].style.display = "block";

    	}
  	else {
  		ele[j].style.display = "block";

  	}
  }}}}

.displayText {
  display: none;
}

    <a class='toggleText' href="javascript:toggle();">Show1</a>
    <div class='displayText'>
      Text1
    </div>
    <a class='toggleText' href="javascript:toggle();">Show2</a>
    <div class='displayText'>
      Text2
    </div>
    <a class='toggleText' href="javascript:toggle();">Show3</a>
    <div class='displayText'>
      Text3
    </div>
    <a class='toggleText' href="javascript:toggle();">Show4</a>
    <div class='displayText'>
      Text4
    </div>

我的代码有什么问题？

Answer 1

编辑

@cirix 引起了我的注意，我的原始代码由于使用 nextElementSibling 而中断。没有必要的预防措施来终止兄弟链。如果单击最后一个 div，它就像编辑之前一样 nextElementSibling将报告 null，因为最后一个元素永远不会有下一个兄弟元素(这就是 last ...last 的原因)。

有两个变化:

1. 添加了一个额外条件以确保唯一的 event.target处理的是<a> anchor ，从而解决问题。
2. 已删除 classList.add/remove并将它们替换为 classList.toggle() ，这是一种改进，而不是修复。

---

通过将所有元素包装在一个元素中来使用事件委托(delegate)。然后在上面注册点击事件。通过更多的设置，您将能够仅使用一个 eventListener 来控制任意数量的链接。代码段中注释的详细信息。

片段

// Reference the parent element
var main = document.getElementById('main');

/* Register main to the click event 
|| when clicked ANYWHERE within main 
|| toggle() is called
*/
main.addEventListener('click', toggle, false);

function toggle(e) {
  /* Determine if the current element in the
  || event chain is the anchor that was 
  || clicked.
  */
  if (e.target !== e.currentTarget && e.target.nodeName === "A") {
    /* tgt is the clicked link
    || txt is the div that follows tgt
    */
    var tgt = e.target;
    var txt = tgt.nextElementSibling;
    // Toggle classes .on and .off
    txt.classList.toggle('on');
    txt.classList.toggle('off');
  }

}

.off {
  display: none;
}

.on {
  display: inline-block;
}

<section id='main'>
  <a class='toggleText' href="#/">Show1</a>
  <div class='displayText off'>
    Text1
  </div>
  <a class='toggleText' href="#/">Show2</a>
  <div class='displayText off'>
    Text2
  </div>
  <a class='toggleText' href="#/">Show3</a>
  <div class='displayText off'>
    Text3
  </div>
  <a class='toggleText' href="#/">Show4</a>
  <div class='displayText off'>
    Text4
  </div>
</section>