Javascript 如果元素没有类，则don'；t显示；否则，表演？

我有一张无序的名单，里面有一组照片。导航设置类似于过滤器，因此如果单击X，则仅显示X类别中的照片等。所有照片最初都设置为“可见”类，如下所示：

<ul>
  <li class="visible">photo</li>
  <li class="visible">photo</li>
  <li class="visible">photo</li>
  etc.
</ul>

---

代码中的此

不是指与您的

#gallery wrap li

选择器匹配的元素。相反，请使用

.each（）

，然后在存储模块中使用

$（this）

：

$('#gallery-wrap li').each(function() {
    if(!$(this).hasClass('visible')) {
        $(this).hide();
    } else {
        $(this).show();
    }
});

---

p/s：它有助于创建一个最小的、简化的代码示例。强烈建议不要链接到外部网站，因为它们容易受到链接腐烂的影响，这意味着它们将失去与未来遇到此问题/问题的用户的相关性。

只需一行就可以做到这一点

$('#gallery-wrap li').hide().filter('.visible').show();

它首先隐藏

all

，然后过滤

visible

类并显示该子集

或可以使用纯CSS实现这一点

#多媒体资料包装{显示：无}
#库换行li.可见{显示：内联块}

我不太喜欢在CSS可以使用的地方使用Javascript。这个脚本片段将向文档的头部注入一些样式，这将为您提供所需的效果。我试图通过使用两个选择器而不是

：not（）

，以及使用元素查询而不是

document.head来最大化兼容性。希望这对你有用：

(function() {
  var style = document.createElement('style'); 
  style.appendChild(document.createTextNode('#gallery-wrap>ul>li{display: none;} #gallery-wrap>ul>li.visible{display: list-item;}'));
  document.getElementsByTagName('head')[0].appendChild(style); })();

以上假设那不是你的网站，你想制作一个书签或其他东西来优化它以供你使用。如果它实际上是您的，只需将其添加到CSS文件：

#gallery-wrap > ul > li {
  display: none;
}

#gallery-wrap > ul > li.visible {
  display: list-item;
}

或者，如果您觉得新奇，并且对旧浏览器的支持稍微少一些：

#gallery-wrap > ul > li:not(.visible) {
  display: none;
}

听起来你需要更新你的css。更改<代码>可见性：隐藏/可见至<代码>显示：无/块

可能与我使用的代码重复，但是没有“可见”类的

li

元素仍然没有被隐藏。另外，要明确的是，这是否意味着他们应该得到一个

显示：none

added？@J82正如其他人也问过的那样，您创建一个关于您的问题的最小示例（也对您自己）会有极大的帮助，无论是作为本机代码片段还是作为小提琴。实际上，我正试图获得相反的效果。因此，如果元素有

可见的

类，它应该显示，否则（如果没有

可见的

类），它应该隐藏。我尝试了你的代码，但是没有

可见的

类的

li

元素仍然显示。在html中，它看起来是这样的：

创建一个演示，使用足够的css来查看发生了什么，我怀疑您在元素出现之前试图使用脚本良好的直觉，charlietfl：始终尝试首先使用css，这至少是我的座右铭，；-）

#gallery-wrap > ul > li:not(.visible) {
  display: none;
}