javascript - 如果元素没有类，则不显示；否则，显示？

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>

当点击某个过滤器时，不属于该类别的照片会移除“可见”类别，从而导致它们淡出。然而，虽然照片淡出，但它们仍然占据相同的空间，导致出现大量空白空间。

我正试图摆脱这个空白空间。我的想法是编写如下代码:

如果li没有“可见”类，则隐藏。否则，显示。

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

jQuery(document).ready(function($){

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

});

Answer 1

一行就可以搞定

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

它首先隐藏所有，然后过滤可见类并显示该子集

OR 可以用纯 CSS 做到这一点

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