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>

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

1 个答案: