的JavaScript切换能见度多个div

http://blog.movalog.com/a/javascript-toggle-visibility/的JavaScript切换能见度多个div

这是一些代码，用我的网站的图片库脚本即时页面，试图切换多个div的知名度也只适用于第一个不过时。有人可以修复它与多个div的工作，我不知道JS :)

这里是JavaScript

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

这里是链接

<tr><td><a href="#" onclick="toggle_visibility('nyc');">New York</a></td> 
<td><a href="#" onclick="toggle_visibility('photoshop');">Photoshop Work</td> 
<td><a href="#" onclick="toggle_visibility('photography');">Photography</td></tr> 
<tr><td><a href="#" onclick="toggle_visibility('art');">Art Projects</td></tr>

等待HTML代码秒，这可能不工作，因为它试图通过“id”属性访问多个div的属性，它是否会与类属性一起工作，如果是的话，我会只改变它所说的“id”到“类“

来源

2013-07-14 user2072017

你可以显示你的多个div的代码？ – Oriol

脚本标记中是否存在“<！ - ”的任何原因？或者你的浏览器是否比Netscape 2早？ –

你希望这影响哪个div？你是用他们的'id'还是用class名来识别他们？ –

看来你试图像

<div id="a"></div> 
<div id="a"></div> 

toggle_visibility('a');

的问题是，每个ID必须是在文档中独一无二的，所以document.getElementById回报一个元素，而不是元素的集合。

然后，如果你想有多个具有相同ID的元素，你应该使用类来代替。

<div class="a"></div> 
<div class="a"></div> 


function toggle_visibility(cl){ 
    var els = document.getElementsByClassName(cl); 
    for(var i=0; i<els.length; ++i){ 
     var s = els[i].style; 
     s.display = s.display==='none' ? 'block' : 'none'; 
    }; 
} 
toggle_visibility('a');

如果你想让它多班工作，请使用

var toggle_visibility = (function(){ 
    function toggle(cl){ 
     var els = document.getElementsByClassName(cl); 
     for(var i=0; i<els.length; ++i){ 
      var s = els[i].style; 
      s.display = s.display==='none' ? 'block' : 'none'; 
     }; 
    } 
    return function(cl){ 
     if(cl instanceof Array){ 
     for(var i=0; i<cl.length; ++i){ 
      toggle(cl[i]); 
     } 
     }else{ 
     toggle(cl); 
     } 
    }; 
})(); 
toggle_visibility('myclass'); 
toggle_visibility(['myclass1','myclass2','myclass3']);

来源

2013-07-14 18:56:55 Oriol

你能告诉我我需要改变的代码，只是脚本，如果我需要改变按钮。我已经将所有元素都改为使用类标记。 – user2072017

像一个魅力伴侣一样工作，感谢堆 – user2072017

@ user2072017请注意，'document.getElementsByClassName'在旧版浏览器上不起作用。请参阅此处的浏览器兼容性表：https：//developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName#Browser_compatibility – Oriol

您可以使用

function toggle_visibility(id) { 
    function toggle(id){ 
     var el = document.getElementById(id); 
     el.style.display = el.style.display==='none' ? 'block' : 'none'; 
    } 
    if(id instanceof Array){ 
     for(var i=0; i<id.length; ++i){ 
     toggle(id[i]); 
     } 
    }else{ 
     toggle(id); 
    } 
}

，并调用它像

toggle_visibility('myid'); 
toggle_visibility(['myid1','myid2','myid3']);

另一种可能的方法是使用arguments变量，但可以减缓你的代码

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

和呼叫它就像

toggle_visibility('myid'); 
toggle_visibility('myid1','myid2','myid3');

如果你不想创建功能toggle每次调用toggle_visibility时间（感谢@大卫·托马斯），你可以使用

var toggle_visibility = (function(){ 
    function toggle(id){ 
     var el = document.getElementById(id); 
     el.style.display = el.style.display==='none' ? 'block' : 'none'; 
    } 
    return function(id){ 
     if(id instanceof Array){ 
     for(var i=0; i<id.length; ++i){ 
      toggle(id[i]); 
     } 
     }else{ 
     toggle(id); 
     } 
    }; 
})(); 
toggle_visibility('myid'); 
toggle_visibility(['myid1','myid2','myid3']);

或者

var toggle_visibility = (function(){ 
    function toggle(id){ 
     var el = document.getElementById(id); 
     el.style.display = el.style.display==='none' ? 'block' : 'none'; 
    } 
    return function(){ 
     for(var i=0; i<arguments.length; ++i){ 
     toggle(arguments[i]); 
     } 
    }; 
})(); 
toggle_visibility('myid'); 
toggle_visibility('myid1','myid2','myid3');

来源

2013-07-14 18:42:45 Oriol

我喜欢这种方法，但是每次调用'toggle_visibility（）'（这有点不必要）时，你都会创建/声明一个新的'toggle（）'函数。 –

你要么需要在ID列表中循环，要么使用类名作为toggle_visibilty的参数----这意味着您将不得不编辑该函数。它看起来像你现在只在一个元素上调用toggle_visibility。

jQuery让这种更简单的事情：

<code> 
    //selects all elements with class="yourClassName" 
    jQuery(".yourClassName").toggle(); 

    //select all divs 
    jQuery("div").toogle(); 

    //select all divs inside a container with id="myId" 
jQuery("#myId > div").toggle(); 
</code>

来源

2013-07-14 18:43:25

有一个在你的代码非常愚蠢的错误.. 添加id属性在TD标签ID ='nyc'等，它应该工作正常

来源

2013-07-14 19:47:39 coding

的JavaScript切换能见度多个div

回答

相关问题