如何使用JavaScript隱藏和顯示多個Div

Question

如何使用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的知識不是很豐富，所以我真的不知道這種方法有多容易。 還是有更簡單的方法？

這是我的第一個堆棧溢出帖子，對不起，如果我做錯了什么或錯過了什么。

Answer 1

如果使用類而不是ID，則可以使用document.QuerySelectorAll（）獲取該類的所有div，然后根據需要顯示或隱藏。

如下所示將隱藏所有具有edit-slider類的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';
        }
    })();

Answer 2

首先，考慮使用class而不是id來設置具有相同屬性和值的多個元素。 然后，使用以下腳本：

<script type="text/javascript">
  document.QuerySelectorAll('div.history-slider').setAttribute("onclick", "myFunction()");
  function myFunction() {
    this.hide;
  }
</script>