Question

我搜索过相同的问题并发现只有jQuery解决方案，但我只想使用JS。

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

这是我的功能。我创建了2个循环：一个用于a元素，第二个用于div s。

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会报告一个空值，因为最后一个元素永远不会有下一个兄弟（这就是最后一个...最后一个）。

有两处变化：

添加了一项额外条件，以确保所处理的event.target <a>只有classList.add/remove个nchors，从而解决问题。

已移除classList.toggle()并将其替换为// 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'); } }，这是一项改进，而非修复。

通过将所有元素包装在一个元素中来使用事件委派。然后在其上注册click事件。通过更多设置，您只需一个eventListener即可控制任意数量的链接。详情请参阅代码段。

<强>段

＆＃13;
＆＃13;
.off { display: none; } .on { display: inline-block; }
＆＃13;
<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>
＆＃13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-sm-6 col-xs-12"> <div class="row"> <div class="col-sm-4"> <div class="thumbnail"> <img src="includes/sample.png" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Buy!</a> </p> </div> </div> </div> <div class="col-sm-4"> <div class="thumbnail"> <img src="includes/sample.png" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Buy!</a> </p> </div> </div> </div> <div class="col-sm-4"> <div class="thumbnail"> <img src="includes/sample.png" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Buy!</a> </p> </div> </div> </div> </div> </div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

将EventListener添加到父容器并检测单击了哪个链接并显示/隐藏其下一个兄弟div：

＆＃13;

var linkClass = 'toggleText';
var textClass = 'displayText';
var visibilityClass = '-isVisible';
var container = document.querySelector('.container');
container && container.addEventListener('click', function(event) {
  var target = event.target;
  if(target.classList.contains(linkClass)) {
    var sibling = target.nextElementSibling;
    if(sibling && sibling.classList.contains(textClass)) {
      sibling.classList.toggle(visibilityClass, !sibling.classList.contains(visibilityClass));
    }
  }
});

＆＃13;

.displayText {
  display: none;
}

.displayText.-isVisible {
  display: inline-block;
}

＆＃13;

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

＆＃13;

显示/隐藏具有相同类名的多个Div（javascript）

2 个答案: