Question

这是我试图用Javascript解决的问题。

我有4个项目列表：#item01 - #item04。每个都有两种字符：颜色和位置，所以我给每个颜色类和一个位置类，有2种颜色（.color01 - .color02）和3个位置（.location01 - .location03）。每个项目都有一个菜单，其中有两个按钮“相同颜色”和“相同位置”。当您单击某个项目的“相同颜色”时，只有那些具有相同颜色的项目将保留，其他项目将消失。例如，如果您选择item01的“同一颜色”按钮，其中包含类.color01和类.location01，则只有item01和item02将保留在页面上，因为它们共享相同的颜色/类.color01，item03和item04将消失，因为它们没有相同的颜色/类.color01。同样，当您点击item01菜单中的“相同位置”时，只会保留位置类相同的项目，其他项目会消失。

我是Javascript的新手。我只知道如何打开/关闭某些ID的项目的可见性，但我不知道如何打开/关闭不属于指定CLASS的项目的可见性。欢迎任何建议。谢谢！

这是HTML：

<div class="item" id="item01" class="color01" class="location01">
    <img src="01.img>
    <div class="menu" id="menu01"><a href="#" onclick="...">Same Color</a> | <a href="#" onclick="..."> Same Location </a></div>
</div>

<div class="item" id="item02" class="color01" class="location02">
    <img src="02.img>
    <div class="menu" id="menu02"><a href="#" onclick="...">Same Color</a>  | <a href="#" onclick="..."> Same Location </a></div>
</div>

<div class="item" id="item03" class="color02" class="location02">
    <img src="03.img>
    <div class="menu" id="menu03"><a href="#" onclick="...">Same Color</a>  | <a href="#" onclick="..."> Same Location </a></div>
<div>

<div class="item" id="item04" class="color02" class="location03">
    <img src="04.img>
    <div class="menu" id="menu04"><a href="#" onclick="...">Same Color</a>  | <a href="#" onclick="..."> Same Location </a></div>
<div>

这是CSS：

.location01, .location02, .location03 .color01, .color02 {display: block;}

Answer 1

试试这个

  $(document).not('.except_classname')

这将返回除文档中带有.not（）类的元素之外的所有元素。

如何切换不属于指定类的标签的可见性

1 个答案: