一键隐藏和显示多个div答案

【问题标题】：Hide and show multiple divs with one click一键隐藏和显示多个div
【发布时间】：2016-01-01 21:22:22
【问题描述】：

我正在尝试一键隐藏和显示两个 div。

<a href="javascript:showhide('bbb','ccc4')">
    you click here to see two div contents </a>sddsds<br />
</a>

我只能隐藏和显示一个 div。当我尝试使用 ID 隐藏和显示两个 div 时，我不能。我尝试了其他一些建议，但它们不起作用。

<a href="javascript:showhide('bbb','ccc4')">
    you click here to see two div contents </a>sddsds<br />
</a>

<div target='ccc4' name='ccc4'  id='ccc4' frameborder='0'onload='setIframeHeight(this.id)'   style='display:none;'  ' > ddfddddd

    <iframe class='shark'  src='imagehugeblow.php?midd=<?=$row5['mid'] ?>ccc' target='ccc' name='ccc'  id='ccc' frameborder='0'onload='setIframeHeight(this.id)'     style='display:none;'              ></iframe>

</div> <div target='bbb' name='bbb'  id='bbb' frameborder='0'onload='setIframeHeight(this.id)'   style='display:none;'  ' > sdds

    <iframe class='shark'  src='imagehugeblow.php?midd=<?=$row5['mid'] ?>ccc' target='bbb' name='bbb'  id='bbb' frameborder='0'onload='setIframeHeight(this.id)'     style='display:none;'              ></iframe>

</div>
<script type="text/javascript">
  function showhide(id) {
    var e = document.getElementById(id);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
  }
</script>

我尝试过使用下面的 Javascript，但它也不起作用。

<script type="text/javascript">
    function toggle_visibility() {
        for (var i = 0, len = arguments.length; i < e; i++) {
            var e = document.getElementById(arguments[i]).style,d = e.display;
            e.display = (d == "block") ? "none" : "block";
        }
    } 
</script>

有没有办法一键隐藏多个div，还是必须使用class而不是id？

【问题讨论】：

如果要传递多个参数，请使用逗号。但是也不推荐使用 javascript href - 而是使用 click 事件并返回 false - 如<a href="turnonjs.html" onclick="return toggle_visibility('bbb','ccc4')">
对不起，我确实添加了逗号，并且正在玩弄它，不小心留下了一个点而不是逗号，但它仍然没有用。
d = e.display 错误，必须使用d = e.style.display
好的，谢谢大家 d = e.style.display 已更正，并且有效。

标签： javascript jquery html

【解决方案1】：

function showhide(id) {
    var e = document.getElementById(id);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}

在这里您只处理一个 ID。

重写您的函数以隐藏两个 ID。类似的东西：

function showhide(id1, id2) {
    var e = document.getElementById(id1);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
    e = document.getElementById(id2);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}

为了减少代码复制，使用数组来存储 id：

function showhide(ids) {
    for (var i = 0; i < ids.length; i++) {
        var e = document.getElementById(ids[i]);
        e.style.display = (e.style.display == 'block') ? 'none' : 'block';
    }
}

并称它为：

showhide(['bbb', 'ccc4'])

或者你可以使用arguments:

function showhide() {
    for (var i = 0; i < arguments.length; i++) {
        var e = document.getElementById(arguments[i]);
        e.style.display = (e.style.display == 'block') ? 'none' : 'block';
    }
}

在这种情况下调用应该是：

showhide('bbb', 'ccc4')

【讨论】：

【解决方案2】：

将您想要切换显示的每个 div 添加为单独的参数：

<a href="javascript:showhide('bbb', 'ccc4')">

然后更改您的 JS 以在参数数组上包含一个循环：

<script type="text/javascript">
  function showhide() {
    for(var i = 0; i < arguments.length; i++){
      var e = document.getElementById(arguments[i]);
      e.style.display = (e.style.display == 'block') ? 'none' : 'block';
    }
  }
</script>

【讨论】：

【解决方案3】：

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript">
    function toggle_visibility(id) 
    {var e = document.getElementById(id);
    if(e.style.display == 'block')e.style.display = 'none'; 
    else e.style.display = 'block'; }
</script>

<a onclick="toggle_visibility('div-to-hide');">

<div id="div-to-hide" class="div-to-hide">
---- content here ---
</div>

【讨论】：

【解决方案4】：

我的版本

window.onload=function() {
  document.getElementById("ccc4").style.display="none";
  document.getElementById("bbb").style.display="none";
  document.getElementById("toggle").onclick=function() {
    var divs = this.getAttribute("data-divs").split(",");
   
    for(var i = 0,len = divs.length;i < len;i++){
      var e = document.getElementById(divs[i]).style;
      console.log(e.display)
      e.display = (e.display == "") ? "none" : "";
    }
    return false;
  }
}

<a href="turnonjs.html" id="toggle" data-divs="ccc4,bbb">
    you click here to see two div contents </a>


<div target='ccc4' name='ccc4'  id='ccc4'>div 1</div> 
<div target='bbb' name='bbb'  id='bbb'> div 2</div>

或者给两个 div 同一个类并使用document.querySelectorAll(".classname")

【讨论】：