Javascript 如何关闭不属于指定类的标记的可见性

下面是我试图用Javascript解决的问题

我有一个4个项目的列表：

#item01

-

#item04

。每个都有两种类型的字符：颜色和位置，所以我给它们一个颜色类和位置类，有2种颜色（

.color01

-

.color02

）和3个位置（

.location01

-

.location03

）。 每个项目都有一个带有两个按钮“相同颜色”和“相同位置”的菜单。 当您单击某个项目的“相同颜色”时，只有那些具有相同颜色的项目将保留，而其他项目将消失。因此，例如，如果您选择

item01

的“相同颜色”按钮，该按钮具有class

.color01

和class

.location01

，只有item01和item02会保留在页面上，因为它们共享相同的颜色/class

。color01

，而

item03

和

item04

会消失，因为它们没有相同的颜色/类别

.color01

。类似地，当您单击

item01

菜单中的“相同位置”时，只有具有相同位置类的项目保留，其他项目消失

我是Javascript新手。我只知道如何打开/关闭特定ID项目的可见性，但我不知道如何打开/关闭非指定类项目的可见性。欢迎提出任何建议。谢谢

以下是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>

试试这个

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

---

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

添加问题不清楚！请刷新问题。我刚刚重新编辑了我的问题。希望现在更清楚了。很抱歉，我不能真正执行[jsfiddle.net]，因为我编写的代码只是一个示例，而不是全部。很抱歉，我不确定您的意思。你能详细说明你的答案吗？谢谢

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