我如何使用 JavaScript 隐藏和显示多个 div？我不想使用 JQuery。我可以让它用于隐藏和显示一个 div，而不是多个 div。出现问题是因为我使用 PHP 显示多条记录。这些记录包含在具有相同 ID 的 div 中。
document.getElementById( 'history-slider' ).addEventListener( 'click', function() {
document.getElementById('edit-slider').style.display = 'block';
document.getElementById('history-slider').style.display = 'none';
}, false );
document.getElementById( 'edit-slider' ).addEventListener( 'click', function() {
document.getElementById('history-slider').style.display = 'block';
document..getElementById('edit-slider').style.display = 'none';
}, false );.edit-slider {
display: none;
}<div class="panel-body panel-strip" id="history-slider">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>
<img src="img/time_icon.png" class="time-icon"> <span class="hour-text">4.00 hrs</span>
</p>
</div>
<hr class="calendar-divider">
<div class="panel-body panel-strip edit-slider">
<div class="row pull-right">
<a href="add.php">
<div class="col-xs-4 delete-panel">
<img src="img/delete_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Delete</span>
</div>
</a>
<a href="http://google.com/">
<div class="col-xs-4 edit-panel">
<img src="img/edit_icon.png" class="edit-images center-block"><span class="text-center edit-texts edit-text">Edit</span>
</div>
</a>
<a href="http://google.com/">
<div class="col-xs-4 record-panel">
<img src="img/record_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Record</span>
</div>
</a>
</div>
</div>HTML;
<div class="panel-body panel-strip" id="history-slider">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>
<img src="img/time_icon.png" class="time-icon"> <span class="hour-text">4.00 hrs</span>
</p>
</div>
<hr class="calendar-divider">
<div class="panel-body panel-strip edit-slider">
<div class="row pull-right">
<a href="add.php">
<div class="col-xs-4 delete-panel">
<img src="img/delete_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Delete</span>
</div>
</a>
<a href="http://google.com/">
<div class="col-xs-4 edit-panel">
<img src="img/edit_icon.png" class="edit-images center-block"><span class="text-center edit-texts edit-text">Edit</span>
</div>
</a>
<a href="http://google.com/">
<div class="col-xs-4 record-panel">
<img src="img/record_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Record</span>
</div>
</a>
</div>
</div>
JavaScript；
document.getElementById( 'history-slider' ).addEventListener( 'click', function() {
document.getElementById('edit-slider').style.display = 'block';
document.getElementById('history-slider').style.display = 'none';
}, false );
document.getElementById( 'edit-slider' ).addEventListener( 'click', function() {
document.getElementById('history-slider').style.display = 'block';
document..getElementById('edit-slider').style.display = 'none';
}, false );
我还在 CSS 中设置了在页面加载时隐藏“edit-slider”div。
.edit-slider {
display: none;
}
对于数据库中的每条记录，HTML 在循环中回显。还添加了信息以替换占位符文本。
我应该如何做才能最好地做到如果点击一个 div，它就会被隐藏，相应的 div 会显示在它所在的位置？
我正在考虑做一些事情，在 PHP 中分别为 div 提供单独的 ID，而不是将这些 ID 传递给 JavaScript 并创建某种循环？我对 JavaScript 的了解并不丰富，所以我真的不知道这种方法有多容易或多难。或者有更简单的方法吗？
这是我的第一个堆栈溢出帖子，如果我做错了什么或遗漏了什么，我深表歉意。
最佳答案
如果您使用类而不是 ID，您可以使用 document.QuerySelectorAll() 获取所有具有该类的 div，然后根据需要显示或隐藏。
像下面这样的东西会隐藏所有带有 edit-slider 类的 div 并显示(假设它们已经被隐藏)所有带有 history-slider 类的 div。
(function() {
var editSliders = document.querySelectorAll('div.edit-slider');
for(var i=0;i<editSliders.length;i++){
editSliders[i].style.display = 'none';
}
var historySliders = document.querySelectorAll('div.history-slider');
for(var i=0;i<historySliders.length;i++){
historySliders[i].style.display = 'block';
}
})();
关于javascript - 如何使用 JavaScript 隐藏和显示多个 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35458972/