Javascript 隐藏/显示带有复选框的类

Question

我刚刚学习javascript，所以请多多包涵!

我希望能够使用复选框来选择隐藏/显示 div 类(基本上过滤显示的信息量)。它是在 this 中完成的...但我试图找出更简单的方法(因为我不需要动态生成复选框选项。)

我遇到了这个例子:Javascript:

 function showMe (it, box) { 
   var vis = (box.checked) ? "block" : "none"; 
   document.getElementById(it).style.display = vis;
 } 

HTML

<form>
<input type="checkbox" checked="checked" value="value1" onclick="showMe('div1', this)" />value1
<input type="checkbox" checked="checked" value="value2" onclick="showMe('div2', this)" />value2
<input type="checkbox" checked="checked" value="value3" onclick="showMe('div3', this)" />value3
</form>

<div id="div1" style="display:block">Show Div 1</div>
<div id="div2" style="display:block">Show Div 2</div>
<div id="div3" style="display:block">Show Div 3</div>

</body>

</html>

但它仅适用于 div id，不适用于类。关于我如何能做到这一点有什么想法吗？

如果您能帮助我，请先致谢!

Answer 1

目前，您可能最好使用像 Prototype 这样的库。 , jQuery , Closure或类似的事情，因为按类名查找元素的标准化(document.getElementsByClassName 方法)相对较新，并且至少一种主要浏览器尚未支持它(它们 document a way添加它，但不是一个很好的)。

在 Prototype 中，$$ 函数按 the CSS3 selectors draft 的一个大子集进行搜索提出的建议。在 jQuery 中，$ 函数做同样的事情(通过 Sizzle 选择器引擎，它也可以单独使用，与 jQuery 不同)。

在 Prototype 中，您可以按类显示或隐藏元素，如下所示:

$$('div.myClassName').invoke('hide'); // Hides all matches
$$('div.myClassName').invoke('show'); // Shows all matches

在 jQuery 中，它是:

$('div.myClassName').hide(); // Hides all matches
$('div.myClassName').show(); // Shows all matches