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来避免浏览器兼容性问题。

按班级切换可见性

3 个答案: