如果元素没有课程，请不要显示;否则，显示？

Question

Here is the site.

我有一个包含一组照片的无序列表。导航设置类似于过滤器，因此如果我点击X，则只显示X类别中的照片等。所有照片最初都设置为“可见”类，如下所示：

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

单击某个过滤器时，该类别中不的照片会删除“可见”类，导致它们淡出。然而，当照片逐渐消失时，它们仍占用相同的空间，导致出现大量空白空间。

我正试图摆脱这个空旷的空间。我的想法是编写代码：

if {里{1}}

以下是我的尝试。但是，这会导致所有照片都不显示。我哪里出错？

does not have the 'visible' class, then hide. else, show.

Answer 1

可以用一行

来做到这一点

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

它首先隐藏all，然后过滤visible类并显示该子集

OR 可以使用纯CSS

执行此操作

   #gallery-wrap li{ display:none}
   #gallery-wrap li.visible{ display:inline-block}

Answer 2

代码中的

this不是指与#gallery-wrap li选择器匹配的元素。相反，请使用.each()，然后在附件中使用$(this)：

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

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

Answer 3

我不喜欢在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;
}