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或类似的库来做这类事情，作为按类查找元素的标准化name（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

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

1 个答案: