如何使用 JavaScript 隐藏和显示多个 div答案

【问题标题】：How To Hide And Display Multiple Divs using JavaScript如何使用 JavaScript 隐藏和显示多个 div
【发布时间】：2016-02-17 14:09:32
【问题描述】：

如何使用 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 中设置了在页面加载时隐藏“编辑滑块”div。

.edit-slider {
    display: none;
}

对于数据库中的每条记录，HTML 都会在循环中回显。还添加了信息以替换占位符文本。

我应该如何最好地制作它，以便在单击 div 时将其隐藏并在其位置显示相应的 div？

我正在考虑做一些事情，在 PHP 中单独为 div 提供单独的 ID，而不是将这些 ID 传递给 JavaScript 并创建某种循环？我对 JavaScript 的了解并不多，所以我真的不知道这种方法有多容易或多难。还是有更简单的方法？

这是我的第一个堆栈溢出帖子，如果我做错了什么或遗漏了什么，非常抱歉。

【问题讨论】：

您不应拥有超过 1 个具有相同 ID 的元素。您的 JS 基本上只会更改其中的 1 个，很可能是它找到的最后一个，因为它假设只有 1 个。

标签： javascript php html css

【解决方案1】：

如果您使用类而不是 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';
        }
    })();

【讨论】：

谢谢埃里克。虽然我只想隐藏点击的 div 并只显示伴随它的编辑 div。

【解决方案2】：

首先，考虑使用class 而不是id 来设置具有相同属性和值的多个元素。然后，使用以下脚本：

<script type="text/javascript">
  document.querySelectorAll('div.history-slider').forEach(item => {
    item.addEventListener("click", myFunction);
  });
  function myFunction() {
    this.hide;
  }
</script>

【讨论】：