0

我的代码看起来像这样

<div id=resultsdiv >
<div id=xxxx class=container>
<a> class=results </a>
<a> class=results </a>
<div id=zzzz class=default>
<p> some default data </p>
</div>
</div>
</div>

我有一个名为“仅默认”的按钮，当我单击该按钮时，应隐藏所有结果类元素，并且只应显示默认类 div，如果任何容器 div 没有任何默认类 div，它也应该被隐藏，一旦我再次单击按钮，整个事情应该被反转这里我的内部 div 是动态创建的，所以我不知道它们的 ID 是什么，所以有没有办法实现我正在寻找的东西只使用类名？

4

3 回答 3

2

如果您可以使用 jQuery 解决方案，那么代码如下：

$("#default_only_button_id").on("click", function() {
    $(".container div:not(.default)").toggle();

    if($(".container .default").length == 0) {
        $(".container").toggle();
    }
});

编辑：

根据@ckarmann 建议更正

编辑2：

我实际上并没有测试编辑后的代码，但它应该可以工作；）

于 2013-01-30T19:55:49.400 回答
1

在 JavaScript 中使用：

document.getElementsByClassName(className)

阅读更多关于：https ://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName

在 jQuery 中使用：CSS 类选择器$('.results').hide(); 在哪里，您可以在以下位置阅读更多内容： http ://www.w3schools.com/jquery/sel_class.asp.results

于 2013-01-30T19:57:38.213 回答
0

getElementsByClassName旧浏览器（尤其是 IE8）不支持。如果您的目标受众是这样的受众，您可能会考虑为纯 JS 路线提供更多类似的东西：

var x = document.getElementById("resultsdiv").getElementsByTagName("div");
for( var i = 0; i < x.length; i++)
    if(x[i].className == "results") //check other className's as desired
        x[i].style.display = "none";

您还拥有parentNode导航 DOM 等工具，请参见此处。

请注意，即使使用这种方法，仍然可能存在一些其他跨浏览器问题。例如，包含多个以空格分隔的类而不是单个值的类属性。像 jQuery 这样的框架很有帮助的原因之一。

于 2013-01-30T20:15:26.960 回答