0

我正在使用以下代码来切换 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>
4

4 回答 4

2

最粗略的解决方案是运行两次..（每次一次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']);"
于 2013-10-03T16:48:09.080 回答
0

你不能使用相同的功能但添加另一个 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');"
于 2013-10-03T16:49:46.213 回答
0

“让他们切换”是指隐藏一个总是显示另一个？

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

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';
}

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

于 2013-10-03T16:50:04.997 回答
0

不确定这是否正是您想要的，但我建议您只需在函数中添加一个参数以包含另一个 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>

希望能帮助到你

于 2013-10-03T16:50:27.467 回答