按類別切換可見性

Question

嗨，任何人都可以幫助我。

我該如何使用切換可視性，而不是以id爲例。

的按鈕

<a href="javascript:void(0);" onclick="toggle_visibility('trailer');">Trailer</a> 

然後這一點。

<div class="trailer" style="display:none">{include file="trailer.tpl"}</div> 

那麼我該如何修改這個JavaScript來處理類。

{literal} 
<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>     
{/literal} 

那麼，什麼樣的JavaScript將爲此請幫助。

Answer 1

內聯：

<a href="#" 
onclick="var div = document.querySelectorAll('trailer')[0]; 
div.style.display=div.style.display=='none'?'block':'none';return false">Trailer</a> 

的jQuery：

$(function() { 
    $("#link").on("click",function(e) { 
    e.preventDefault(); 
    $(".trailer").toggle(); 
    }); 
}); 

通用的jQuery：使用

<a href=".." class="link" id="trailer">Toggle</a> 

Answer 2

$(function() { 
    $(".link").on("click",function(e) { 
    e.preventDefault(); 
    $("."+this.id).toggle(); 
    }); 
}); 

您應該使用jQuery來避免瀏覽器兼容性問題。

Answer 3

使用getElementsByClassName方法

function toggle_visibility(className) { 
    elements = document.getElementsByClassName(className); 
    for (var i = 0; i < elements.length; i++) { 
     elements[i].style.display = elements[i].style.display == 'inline' ? 'none' : 'inline'; 
    } 
}