Question

我有以下jQuery过滤器代码：我正在尝试仅倾斜可见元素（如果应用了另一个过滤器，请使用过滤器。）

$(window).bind("load", function() {
    $(".filters li").on("click", function() {
        id = ($(this).data("id") + '').split(',');
        filter = $(this).data("filter");
        $("#hotel-list .box").hide();
        id[0] == "all" && $("#hotel-list .box").show() || id.forEach(function(v) {
            $('#hotel-list .box[data-' + filter + '*="' + v.trim() + '"]').show();
        });
        return false;
    });

过滤器的HTML代码：

<div class="panel style1 arrow-right">
    <h4 class="panel-title"><a class="collapsed" data-toggle="collapse" href="#rating-filter">Clasificare</a></h4>

    <div id="rating-filter" class="filters panel-collapse collapse in">
        <div class="panel-content">
            <ul class="check-square filters-option">
                <li data-id="2, 3, 4, 5" data-filter="stars">
                    <a href="#">Toate<small class="totals"></small></a>
                </li>

                <li data-id="2, 3" data-filter="stars">
                    <a href="#"><div data-placement="bottom" data-toggle="tooltip" class="stars-3-container" title="" data-original-title="3 Stele"><span style="width: 80%;" class="stars-3"></span></div><small class="total-three"></small></a>
                </li>

                <li data-id="4" data-filter="stars">
                    <a href="#"><div data-placement="bottom" data-toggle="tooltip" class="stars-4-container" title="" data-original-title="4 Stele"><span style="width: 80%;" class="stars-4"></span></div><small class="total-four"></small></a>
                </li>

                <li data-id="5" data-filter="stars">
                    <a href="#"><div data-placement="bottom" data-toggle="tooltip" class="stars-5-container" title="" data-original-title="5 Stele"><span style="width: 80%;" class="stars-5"></span></div><small class="total-five"></small></a> 
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- Board Type -->
<div class="panel style1 arrow-right">
    <h4 class="panel-title"><a class="collapsed" data-toggle="collapse" href="#board-filter">Tip Masa</a></h4>

    <div id="board-filter" class="filters panel-collapse collapse in">
        <div class="panel-content">
            <ul class="check-square filters-option">
                <li data-id='Room, No, Breakfast, Half Board, Full Board, Inc, Self, Ultra' data-filter="board">
                    <a href="#">Toate<small class="total"></small></a>
                </li>

                <li data-id='Room, No' data-filter="board">
                    <a href="#">Room Only<small class="total-ro"></small></a>
                </li>

                <li data-id='Breakfast' data-filter="board">
                    <a href="#">Breakfast<small class="total-bb"></small></a>
                </li>

                <li data-id='Half' data-filter="board">
                    <a href="#">Half Board<small class="total-hb"></small></a>
                </li>

                <li data-id='Full Board, Full board' data-filter="board">
                    <a href="#">Full Board<small class="total-fb"></small></a>
                </li>

                <li data-id='Inc, Ultra' data-filter="board">
                    <a href="#">All Inclusive<small class="total-ai"></small></a>
                </li>


                <li data-id='Self'data-filter="board">
                    <a href="#">Self Catering<small class="total-sc"></small></a>
                </li>

            </ul>
        </div>
    </div>
</div>

过滤的html元素是：

<div id="hotel-list" class="hotel-list listing-style3 hotel">
<article class="box" data-board="Room Only" data-stars="3">
<div>Content here</div>
</article>
<article class="box" data-board="Breakfast" data-stars="4">
<div>Content here</div>
</article>
.....
</div>

JSFIDDLE

有关于如何仅过滤可见元素的任何想法吗？

Answer 1

尝试这样的事情，改变

这

filter = $(this).data("filter");

到

filter = $(this).data("filter").filter(':visible');

Answer 2

您可以执行类似

的过滤器

jQuery(function ($) {
    $(".filters li").on("click", function () {
        $(this).closest('ul').find('.selected').removeClass('selected');
        $(this).addClass('selected');

        var filters = $(".filters li.selected").map(function () {
            var filter = $(this).data("filter");
            return[ $.map(($(this).data("id") + '').split(','), function (v) {
                return '.box[data-' + filter + '*="' + v.trim() + '"]'
            })];
        }).get();

        var $els = $('#hotel-list .box');
        if (filters.length) {
            $els.show();
            $.each(filters, function (rel, list) {
                console.log(list)
                $els.not(list.join()).hide();
            });
        } else {
            $els.show();
        }

    });
});

演示：Fiddle

jQuery仅过滤可见元素

2 个答案: