具有过滤功能的 CSS 网格无法正常工作

Question

我正在尝试使用 jQuery 为我的画廊制作一个过滤器功能。

按下按钮时，图像会按类别过滤。

我使用 jQuery 来处理 add 和 remove 一个类，因此我可以在按下按钮时移动图像以适应正确的行。

但问题是add 类总是显示出来。

例如，当按下btn-1 时，grid-item-6 应该从第 nr 行移动。 4 到第 nr 行。 1 - 但不是移动它，而是停留在第 nr 行。 1一直。 （当我说移动时，不是作为动画移动 - 只是移动位置）

Grid-item-6 at row 1

另一个问题是当我第一次按btn-1 时画廊正确显示，但我第二次按按钮时元素消失了。

First press

Second press

    $( document ).ready(function() {

    $("#btnContainer button").each(function() {
        $(this).on("click", function(){
            var filtertag = $(this).attr('class');
            $('.grid-item').show();
            $('.grid-item:not(.' + filtertag + ')').hide();
        });
    });

    $('.btn-1').on("click", function() {
        $(this).removeClass("grid-item-6");
         $(this).addClass("grid-item-6-2");
          return false;
     });

});

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

    <div id="btnContainer">
            <button class="btn-all">All</button>
            <button class="btn-1">btn1</button>
        </div>

<div class="row">

        <div class="grid-wrapper">
                <div class="grid-item grid-item-1 btn-all">1</div>
                <div class="grid-item grid-item-2 btn-all">2</div>
                <div class="grid-item grid-item-3 btn-all">3</div>
                <div class="grid-item grid-item-4 btn-all">4</div>

                <div class="grid-item grid-item-5 btn-all">5</div>
                <div class="grid-item grid-item-6 grid-item-6-2 btn-all btn-1">6</div>
                <div class="grid-item grid-item-7 btn-all">7</div>
                <div class="grid-item grid-item-8 grid-item-8-2 btn-all btn-1">8</div>

                <div class="grid-item grid-item-9 btn-all">9</div>
                <div class="grid-item grid-item-10 grid-item-10-2 btn-all btn-1">10</div>
                <div class="grid-item grid-item-11 grid-item-11-2 btn-all btn-1">11</div>
            </div>

</div>

    .grid-wrapper {
    display: grid;
    grid-template-columns: 250px 250px 250px 250px;
    grid-template-rows: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px;
    padding: 20px;
    grid-gap: 3rem;
}

.grid-item-1 {
    background: grey;
    grid-row: 1 / span 2;
}

.grid-item-2 {
    background: lightgrey;
    grid-row: 1 / span 3;
}

.grid-item-3 {
    background: lightblue;
    grid-row: 1 / span 2;
}

.grid-item-4 {
    background: lightsalmon;
    grid-row: 1 / span 3;
}

.grid-item-5 {
    background: lightskyblue;
    grid-row: 3 / span 3;
}

.grid-item-6 {
    background: lightslategray;
    grid-row: 4 / span 3;
}

.grid-item-6-2 {
    background: lightslategray;
    grid-row: 1 / span 3;
}

Answer 1

这里有一个稍微好一点的方法 - 如果您有很多按钮，您可以使用动态循环，但对于少数几个，这会很好。

  $( document ).ready(function() {

    $('#btn-all').on("click", function() {
         $('.grid-item').show();
     });

    $('#btn-1').on("click", function() {
          $('.grid-item').hide();
          $('.btn-1').show();
     });

});

  .grid-wrapper {
    display: grid;
    grid-template-columns: 250px 250px 250px 250px;
    grid-template-rows: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px;
    padding: 20px;
    grid-gap: 3rem;
}

.grid-item-1 {
    background: grey;
    grid-row: 1 / span 2;
}

.grid-item-2 {
    background: lightgrey;
    grid-row: 1 / span 3;
}

.grid-item-3 {
    background: lightblue;
    grid-row: 1 / span 2;
}

.grid-item-4 {
    background: lightsalmon;
    grid-row: 1 / span 3;
}

.grid-item-5 {
    background: lightskyblue;
    grid-row: 3 / span 3;
}

.grid-item-6 {
    background: lightslategray;
    grid-row: 4 / span 3;
}

.grid-item-6-2 {
    background: lightslategray;
    grid-row: 1 / span 3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"  id="grid-container">

    <div id="btnContainer">
            <button id="btn-all">All</button>
            <button id="btn-1">btn1</button>
        </div>

<div class="row">

        <div class="grid-wrapper">
                <div class="grid-item grid-item-1 btn-all">1</div>
                <div class="grid-item grid-item-2 btn-all">2</div>
                <div class="grid-item grid-item-3 btn-all">3</div>
                <div class="grid-item grid-item-4 btn-all">4</div>

                <div class="grid-item grid-item-5 btn-all">5</div>
                <div class="grid-item grid-item-6 grid-item-6-2 btn-all btn-1">6</div>
                <div class="grid-item grid-item-7 btn-all">7</div>
                <div class="grid-item grid-item-8 grid-item-8-2 btn-all btn-1">8</div>

                <div class="grid-item grid-item-9 btn-all">9</div>
                <div class="grid-item grid-item-10 grid-item-10-2 btn-all btn-1">10</div>
                <div class="grid-item grid-item-11 grid-item-11-2 btn-all btn-1">11</div>
            </div>

</div>