如何使用jQuery应用CSS并在过滤后忽略隐藏元素？

Question

我有许多图像，我在交替尺寸的网格系统中进行布局。出于多种原因，图像必须以默认大小开始，我根据它的位置用jQuery更改每个图像。这是一张应该look like.

的图纸

我也使用jQuery根据类别进行过滤，并希望图像在过滤后执行相同的操作。但是，CSS似乎应用于隐藏图像以及可见图像。我曾尝试使用.filter()随时向我提供:visible元素，但没有任何运气。

这是HTML：

<div id='pagetop'>
      <ul>
        <li class="filter active" data-filter="all">All</li>
        <li class="filter" id='cat1' data-filter="category-1">A</li>
        <li class="filter" id='cat2' data-filter="category-2">B</li>
        <li class="filter" id='cat3' data-filter="category-3">C</li>
      </ul>
    </div>

    <div id="container" class="container">

      <!-- LR 1* -->
      <!--1-->
      <div class='mix category-2 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>ONE</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class B</p>
          </div>
        </div>
      </div>
      <!-- BR 1* -->
      <!--2-->
      <div class='mix category-3 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>TWO</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class C</p>
          </div>
        </div>
      </div>
      <!-- DR 2* -->
      <!--3-->
      <div class='mix category-1 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>THREE</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class A</p>
          </div>
        </div>
      </div>
      <!-- DR 3* -->
      <!--4-->
      <div class='mix category-1 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>FOUR</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class A</p>
          </div>
        </div>
      </div>
      <!-- LR 4* -->
      <!--5-->
      <div class='mix category-2 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>FIVE</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class B</p>
          </div>
        </div>
      </div>
      <!-- LR 5* -->
      <!--6-->
      <div class='mix category-2 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>SIX</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class B</p>
          </div>
        </div>
      </div>
      <!-- DR 6* -->
      <!--7-->
      <div class='mix category-1 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>SEVEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class A</p>
          </div>
        </div>
      </div>
      <!-- LR 8* -->
      <!--8-->
      <div class='mix category-2 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>EIGHT</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class B</p>
          </div>
        </div>
      </div>
      <!-- LR 9* -->
      <!--9-->
      <div class='mix category-2 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>NINE</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class B</p>
          </div>
        </div>
      </div>
      <!-- BR 3* -->
      <!--10-->
      <div class='mix category-3 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>TEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class C</p>
          </div>
        </div>
      </div>
      <!-- LR 10* -->
      <!--11-->
      <div class='mix category-2 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>ELEVEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class B</p>
          </div>
        </div>
      </div>
      <!-- BR 4* -->
      <!--12-->
      <div class='mix category-3 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>TWELVE</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class C</p>
          </div>
        </div>
      </div>
      <!-- BR 5* -->
      <!--13-->
      <div class='mix category-3 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>THIRTEEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class C</p>
          </div>
        </div>
      </div>
      <!-- BR 6* -->
      <!--14-->
      <div class='mix category-3 mixlarge '>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>FOURTEEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class C</p>
          </div>
        </div>
      </div>
      <!-- BR 7* -->
      <!--15-->
      <div class='mix category-3 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>FIFTEEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class C</p>
          </div>
        </div>
      </div>
      <!-- BR 8* -->
      <!--16-->
      <div class='mix category-3 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>SIXTEEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class C</p>
          </div>
        </div>
      </div>
      <!-- LR 11* -->
      <!--17-->
      <div class='mix category-2 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>SEVENTEEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class B</p>
          </div>
        </div>
      </div>
      <!-- BR 9* -->
      <!--18-->
      <div class='mix category-3 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>EIGHTEEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class C</p>
          </div>
        </div>
      </div>
    </div>

这是CSS：

* {
      padding: 0;
      margin: 0;
    }

    #pagetop {
      margin-top: 50px;
    }

    .container {
      margin: auto;
      width: 1008px;
    }

    .mixlarge {
      width: 660px;
      float: left;
      margin-right: 6px;
      margin-left: 6px;
    }

    .container .mixsmall {
      width: 324px;
      float: left;
      margin-right: 6px;
      margin-left: 6px;
    }

    .container .mix {
      margin-bottom: 20px;
      position: relative;
    }

    .active {
      border-bottom: 6px solid #1F74BF;
    }

    .filter:hover {
      border-bottom: 6px solid #1F74BF;
    }

    .mixlarge .overlay {
      background: rgba(255, 255, 255, 0.75);
      height: 337px;
      width: 660px;
      left: 0;
      position: absolute;
      top: 0;
      opacity: 0;
    }

    .mixsmall .overlay {
      background: rgba(255, 255, 255, 0.75);
      height: 337px;
      width: 100%;
      left: 0;
      position: absolute;
      top: 0;
      opacity: 0;
    }

    .shorttext {
      position: absolute;
      top: 42%;
      left: 35%;
    }

    .longtext {
      position: absolute;
      top: 42%;
      left: 40%;
    }

    .px32 {
      font-size: 32px;
    }

    .mix:hover .overlay {
      opacity: 1;
      -webkit-transition: opacity 500ms;
      -moz-transition: opacity 500ms;
      -o-transition: opacity 500ms;
      transition: opacity 500ms;
    }

    .text {
      position: absolute;
      width: 100%;
      top: 35%;
      text-align: center;
    }

    .text a {
      text-decoration: none;
    }

    .roomdesc {
      font-family: Helvetica, Arial, sans-serif;
      font-weight: 600;
      font-size: 18px;
      line-height: 21px;
      letter-spacing: -.5px;
    }

    .roomtype {
      font-family: Helvetica, Arial, sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
    }

    .mixsmall img {
      width: 324px;
      position: relative;
    }

    .mixlarge img {
      width: 660px;
      position: relative;
    }

    ul {
      text-align: center;
      margin-bottom: 20px;
    }

    li {
      display: inline;
      margin-right: 20px;
      font-size: 20px;
      color: #1F74BF;
      cursor: pointer;
    }

    .hide {
      overflow: hidden;
    }

这是jQuery：

   $('.filter').click(function() {
      var dataFilter = $(this).attr('data-filter')

      $('.filter').removeClass('active');
      $(this).addClass('active');

      if (dataFilter == 'all') {
        $('#container').children('div.mix').show('slow');
      } else {
        $('#container').children('div:not(.' + dataFilter + ')').hide('slow');
        $('#container').children('div.' + dataFilter).show('slow');
      }
    });


    $('#container').find('.mix:nth-child(4n+1)').each(function() {
      var smallSize = 324;
      $(this).css('width', smallSize);
      $(this).css('overflow', 'hidden');
    });

    $('#container').find('.mix:nth-child(even)').each(function() {
      var prevImg = $(this).prev().width();
      var rightSize = (984 - prevImg)

      $(this).css('width', rightSize);
      $(this).css('overflow', 'hidden');
    })

    $('#container').find('.mix:nth-child(4n+3)').each(function() {
      var largeSize = 660;
      $(this).css('width', largeSize);
      $(this).css('overflow', 'hidden');
    });

这是迄今为止我完成的link to a jsfiddle工作。

所以，我有初始的CSS工作，我有过滤工作。但是，我需要一点帮助才能将CSS应用于过滤后的场景图像。

Answer 1

您可以使用https://api.jquery.com/hasclass/

来检查图片是否具有某个类，而不是使用.filter。

如果图像有某个类，那么让它做一些事情。

Answer 2

你在搜索.addClass（）吗？ https://api.jquery.com/addclass/

对于过滤，您应该检查JQuery中的：visible Selector 详情：https://api.jquery.com/visible-selector/ 还有一个：隐藏

参考选择器的完整列表： https://api.jquery.com/category/selectors/