Question

我如何使用JavaScript隐藏和显示多个div？我不想使用JQuery。我可以让它隐藏和显示一个div而不是多个div。问题的起源是因为我使用PHP来显示多条记录。这些记录包含在具有相同ID的div中。

＆＃13;

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 );

＆＃13;

.edit-slider {
    	display: none;
    }

＆＃13;

<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>

＆＃13;

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中设置了隐藏＆＃34;编辑滑块＆＃34; div页面加载。

.edit-slider {
    display: none;
}

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

我应该如何最好地制作它，以便如果点击它的div被隐藏并且相应的div显示在它的位置？

我正在考虑做一些关于在PHP中单独给div分开ID而不是将这些ID传递给JavaScript并创建某种循环的东西？我对JavaScript的了解并不大，所以我不知道这种方法有多么简单或困难。或者有更简单的方法吗？

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

Answer 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';
        }
    })();

Answer 2

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

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

如何使用JavaScript隐藏和显示多个Div

2 个答案: