Question

我使用以下代码切换div区域的可见性：

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

要切换它，我正在使用：

onclick="toggle_visibility('id_of_element_to_toggle');"

如何一次切换2个div的可见性？我想让他们切换。方法越简单越好。

更多信息：

我没有运气。这是我的代码：

<a href="#id" onclick="toggle_visibility(['id', 'callgraph']);">Change Payment Method</a>

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

Answer 1

最粗糙的解决方案是运行两次..（每次id 一次

onclick="toggle_visibility('first-id');toggle_visibility('second-id')"

另一种方法是传递一组id值

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

并像这样称呼它

onclick="toggle_visibility(['first-id','second-id']);"

Answer 2

您不能使用相同的功能但添加其他ID吗？

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

然后

onclick="toggle_visibility('id_of_element_to_toggle1','id2');"

Answer 3

通过“让他们切换”你的意思是隐藏一个总是显示另一个吗？

对于初学者，在调用函数时需要引用这两个元素：

onclick="toggle_visibility('id_of_element_to_toggle', 'id_of_other_element');"

然后在你的函数中，只需设置它们两个：

function toggle_visibility(id1, id2) {
    var e1 = document.getElementById(id1);
    var e2 = document.getElementById(id2);
    if(e1.style.display == 'block')
        e1.style.display = 'none';
        e2.style.display = 'block';
    else
        e1.style.display = 'block';
        e2.style.display = 'none';
}

它不是非常优雅，但应该清楚有效地完成工作。（有一个潜在的额外好处，如果通过其他方式这两个元素“不同步”，那么这将重新同步它们。或者可能添加相同功能的错误，具体取决于你看待它的方式。）

Answer 4

不确定这是否正是您想要的，但我建议您只需在函数中添加一个参数，以包含另一个DIV元素，即：

<script type="text/javascript">
function toggle_visibility(id1, id2) {
var e1 = document.getElementById(id1);
var e2 = document.getElementById(id2);

if(e1.style.display == 'block')
  e1.style.display = 'none';
  e2.style.display = 'none';
else
  e1.style.display = 'block';
  e2.style.display = 'block';
}
 </script>

希望有所帮助

一次切换两个div的可见性

4 个答案: