按类别切换可见性

Question

大家好，请帮我一下。

如何使用Toggle Visibility来控制类(class)而不是id。

按钮

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

那么这样做。

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

那我该如何修改这段JavaScript使其能够与类(class)一起使用呢？

{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对此的作用。

- mike

---

使用 document.getElementByClassName 而不是 document.getElementById。 - RafH

.getElementsByClassName（简写为's'） - tobi

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

- Jonathan

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>

- mplungjan

Answer 3

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

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

- Nicolas Straub