的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

回答

相關問題