有人可以帮助我进行同位素洗牌吗

时间:2020-07-06 07:18:36

标签: javascript html jquery-isotope

我正在尝试实现以下功能:当用户登录时,他们将首先看到数字1 2 3,然后开始选择其他选项以看到另一个数字,但是即使我将选择的值添加到我的计算机中,它最终也会显示所有数字选项标签:

这是我的页面: https://github.com/jOOQ/jOOQ/issues/10361

这是我的index.html

    <p>
        <select class="filters-select">
            <option selected value=".one">one</option>
            <option value=".two">two</option>
            <option value=".three">three</option>
        </select>
    </p>

    <div class="card-deck text-dark" id="grid">
        <div class="element-item one card">
            <div class="card-body">
                <h4 class="card-title">1</h4>
            </div>
        </div>
        <div class="element-item one card">
            <div class="card-body">
                <h4 class="card-title">2</h4>
            </div>
        </div>
        <div class="element-item one card">
            <div class="card-body">
                <h4 class="card-title">3</h4>
            </div>
        </div>


        <div class="element-item two card">
            <div class="card-body">
                <h4 class="card-title">4</h4>
            </div>
        </div>

        <div class="element-item two card">
            <div class="card-body">
                <h4 class="card-title">5</h4>
            </div>
        </div>

        <div class="element-item two card">
            <div class="card-body">
                <h4 class="card-title">6</h4>
            </div>
        </div>

        <div class="element-item three card">
            <div class="card-body">
                <h4 class="card-title">7</h4>
            </div>
        </div>

        <div class="element-item three card">
            <div class="card-body">
                <h4 class="card-title">8</h4>
            </div>
        </div>

        <div class="element-item three card">
            <div class="card-body">
                <h4 class="card-title">9</h4>
            </div>
        </div>

    </div>
</div>

<script>
    // init Isotope
    var $grid = $('#grid').isotope({
        itemSelector: '.element-item',
    });
    // filter functions
    var filterFns = {
        // show if name ends with -ium
        ium: function () {
            var name = $(this).find('.name').text();
            return name.match(/ium$/);
        }
    };
    // bind filter on select change
    $('.filters-select').on('change', function () {
        // get filter value from option value
        var filterValue = this.value;
        // use filterFn if matches value
        filterValue = filterFns[filterValue] || filterValue;
        $grid.isotope({
            filter: filterValue
        });
    });
</script>

如何仅在页面上显示数字1 2 3而不是全部数字

0 个答案:

没有答案
相关问题