Question

我有多个div = id的div。还有id = b的多个div。现在我想隐藏ID为的所有div，显示id为b 的所有div。这应该使用切换来完成。因此，再次单击按钮会显示所有ID为的div，并隐藏所有ID为id 的div。

<script>
            function toggle_visibility(e, b) {  
   var e = document.getElementById(e);
   var e2 = document.getElementById(b);
   if(e.style.display == 'none') {                
      e.style.display = 'inline-block'; //block will show the conain in div            
      e2.style.display = 'none';
   }
   else {
      e.style.display = 'none';            
      e2.style.display = 'inline-block';
   }              
}
        </script>
        <style>
            .menu{
                display:inline-block;
                border:1px;
                border-style: solid;
                border-color: black;
                width:auto;
                height:30px;
                padding: 5px;
                margin: 2px;
            }
        </style>
        <a href="#id" onclick="toggle_visibility('e', 'b');">Change</a>

        <div id="e" class="menu">Male</div><div id="b" class="menu" style="display: none;">পুরুষ</div>

        <div id="e" class="menu">Female</div><div id="b" class="menu" style="display: none;">মহিলা</div>

Answer 1

不要将id用作多个！ 因此，请将您的ID值移至类名

function toggle_visibility(e, b) {  
   var e = document.getElementsByClassName(e);
   var e2 = document.getElementsByClassName(b);
   for(var i =0;i<e.length;i++){
     if(e[i].style.display == 'none') {                
        e[i].style.display = 'inline-block'; //block will show the conain in div            
        e2[i].style.display = 'none';
     }
     else {
        e[i].style.display = 'none';            
        e2[i].style.display = 'inline-block';
     }              
  }
}

如果你想在Jquery中做，我认为不需要参数..

function toggle_visibility() {  
  $('.e').toggle();
  $('.b').toggle();
}

Answer 2

对于HTML页面中的任何id，

element必须unique按W3C rules。我建议为每个div添加一个单独的类，这个类必须是常见的。比如说，将classA添加到divs，其id必须为e，将classB添加到divs id必须{ {1}}。

＆＃13;

$(".toggleVisible").on('click', function(e) {
  e.preventDefault();
  $('.classA,.classB').slideToggle(); 
  //slideToggle will toggle whichever hidden to display and vice versa
})

＆＃13;

Javascript版

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggleVisible">Change</a>

<div class="menu classA">Male</div>
<div class="menu classB" style="display: none;">পুরুষ</div>

<div class="menu classA">Female</div>
<div class="menu classB" style="display: none;">মহিলা</div>

＆＃13;

function toggle_visibility() {
  var e = document.getElementsByClassName("classA");//returns an array of elements
  //Assuming that you will have equal amount of classA and classB elements
  var e2 = document.getElementsByClassName("classB");
  for (var i = 0; i < e.length; i++) {
    if (e[i].style.display == 'none') {
      e[i].style.display = 'inline-block'; //block will show the conain in div            
      e2[i].style.display = 'none';
    } else {
      e[i].style.display = 'none';
      e2[i].style.display = 'inline-block';
    }
  }

}

＆＃13;

Answer 3

id必须是唯一的...您可以使用常见的class名称来定位多个元素，如下所示：

     function toggle_visibility(e, b) {
       var e = $(".e");
       var e2 = $(".b");
       if (e.is(":visible")) {
         e2.show();
         e.hide();
       } else {
         e2.hide();
         e.show();
       }
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#id" onclick="toggle_visibility('e', 'b');">Change</a>

<div id="e" class="menu e">Male</div>
<div id="b" class="menu b" style="display: none;">পুরুষ</div>

<div id="e" class="menu e">Female</div>
<div id="b" class="menu b" style="display: none;">মহিলা</div>

一次切换所有div的可见性

3 个答案: