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

Question

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

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

我使用了 jQuery 到 add 和 remove 一个 class 所以我可以移动图像以适应右行，因为它们在按下按钮时移动被按下。

但问题是 add class 总是显示。

例如，当按下 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>

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

CSS grid with filter function not working properly

html

css

jquery

layout

css-grid