如何使用JavaScript隐藏和显示多个div [英] How To Hide And Display Multiple Divs using JavaScript
问题描述
我如何使用JavaScript隐藏和显示多个div？我不想使用JQuery。我可以让它工作的隐藏和显示一个div，但不是多个div。问题产生，因为我使用PHP显示多个记录。这些记录包含在具有相同ID的div中。
document.getElementById（'history-slider'）.addEventListener 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; }
HTML;
< div class =panel-body panel-stripid =history-slider>
< h3>标题< / h3>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit。< / p>
< p>
< img src =img / time_icon.pngclass =time-icon> < span class =hour-text> 4.00小时< / 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.pngclass =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.pngclass =edit-images center-block>< span class =text-center edit-texts edit-text>编辑< / span> ;
< / div>
< / a>
< a href =http://google.com/>
< div class =col-xs-4 record-panel>
< img src =img / record_icon.pngclass =edit-images center-block>< span class =text-center edit-texts> Record< / span>
< / div>
< / a>
< / div>
< / div>
JavaScript;
code> 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'）。 display ='block';
document..getElementById（'edit-slider'）。style.display ='none';
}，false）;
我也在CSS中设置隐藏页面加载的edit-sliderdiv。 / p>
.edit-slider {
display：none;
}
对于数据库中的每条记录，HTML都循环显示。还添加了信息来替换占位符文本。
我应该如何做最好的做法，如果一个div如果单击它被隐藏，并显示相应的div
我正在考虑做一些关于单独给予div在PHP中的单独的ID，而不是将这些ID传递给JavaScript并创建某种循环？我对JavaScript的了解并不多，所以我真的不知道这个方法是多么容易或困难。或者有更容易的方法吗？
这是我的第一个堆栈溢出帖子，对不起，如果我做错了什么或错过了什么。
如果你使用类而不是ID，你可以使用document.QuerySelectorAll（）获取所有的div，然后根据需要显示或隐藏。
下面的东西会隐藏所有的div和一个编辑滑块类，并显示（假设他们已经隐藏）所有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';
}
}）（）;
How would I go about hiding and showing multiple divs using JavaScript? I don't want to use JQuery. I can make it work for hiding and showing one div but not multiple divs. The problem originates because I'm using PHP to display multiple records. These records are included in divs which have the same ID.
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 );
I have also set in the CSS to hide the "edit-slider" div on page load.
.edit-slider {
display: none;
}
The HTML is echoed out in a loop for every record in the database. Information is also added in replace of the placeholder text.
How should I best go about making it so that if a div if clicked it is hidden and the corresponding div is shown in it's place?
I was thinking about doing something about individually giving the divs separate ID's in PHP and than passing those ID's to JavaScript and creating some sort of a loop? My knowledge of JavaScript isn't massive so I don't really know how easy or difficult this method would be. Or is there a much easier method?
This is my first stack overflow post,so sorry if I'm doing anything wrong or missed something.
If you use classes instead of IDs you can use document.QuerySelectorAll() to get all the divs with that class and then show or hide as necessary.
Something like below would hide all divs with an edit-slider class and reveal (assuming they were already hidden) all divs with a history-slider class.
(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隐藏和显示多个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
