javascript - Toggle 按类的可见性

Question

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

例如，我如何按类而不是 id 使用 Toggle Visibility。

按钮

<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

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

Answer 2

排队：

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

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

使用

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

Answer 3

function toggle_visibility(className) {
    $('.' + className).toggle();
}

您应该使用 jQuery 来避免浏览器兼容性问题。