由具有連續編號ID的ID切換元素

我完全迷失在這裏。我正在嘗試使用連續編號的ID調用多個元素的可見性切換。該類已被用於其他功能。我希望腳本運行一個循環以獲取具有集ID和連續編號的所有元素以切換可見性。這是我的代碼。由具有連續編號ID的ID切換元素

<div> 
<input type="checkbox" name="tag" id="angels" onclick="toggle_visibility('angelT');" /> 
<label for="angels"><span>Hide Angels</span> 

</label> 
</div> 
<div id="angelT1" style="display:block">angel1</div> 
<div id="angelT2" style="display:block">angel2</div> 
<div id="angelT3" style="display:block">angel3</div> 
<div id="angelT4" style="display:block">angel4</div> 
<div id="angelT5" style="display:block">angel5</div> 
<div id="angelT6" style="display:block">angel6</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>

來源

2014-02-25 meconner

試試這個：你可以使用一個共同的class做到這一點會更好

function toggle_visibility(prefix) { 
    var i = 0; 
    var e = null; 

    do { 
    ++i; 
    var id = prefix + i; 

    e = document.getElementById(id); 

    if (e) 
     if (e.style.display == 'block') 
     e.style.display = 'none'; 
     else 
     e.style.display = 'block'; 
    } while (e); 
}

例子：http://codepen.io/paulroub/pen/lhHby

來源

2014-02-25 20:37:00

這是一個。非常感謝。現在編碼1300塊。 – meconner

id選擇器是非常具體的，並且您的元素上的ID都不會匹配。

<div> 
<input type="checkbox" name="tag" id="angels" onclick="toggle_visibility('angelT');" /> 
<label for="angels"><span>Hide Angels</span> 

</label> 
</div> 
<div id="angelT1" class="angelT" style="display:block">angel1</div> 
<div id="angelT2" class="angelT" style="display:block">angel2</div> 
<div id="angelT3" class="angelT" style="display:block">angel3</div> 
<div id="angelT4" class="angelT" style="display:block">angel4</div> 
<div id="angelT5" class="angelT" style="display:block">angel5</div> 
<div id="angelT6" class="angelT" style="display:block">angel6</div> 


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

來源

2014-02-25 20:34:53 Bic

我相信使用jQuery現在解決這個問題的方法