Question

我使用同位素按名称，日期或类别过滤和排序元素，在主容器中降序或升序。

我需要将第一个元素保留在左上角，这样它就不会受到排序的影响。除了通过升序/降序排序时，我已设法使其工作。第一个元素已排序，在进行了许多不同的排序选择后，页面上会出现间隙。当我查看间隙所在的代码时，第一个元素的代码会在页面的不同位置重复，具体取决于排序的选择次数。

如何让第一个元素表现出来？以下是我的代码。

            //isotope set up
            var $container = $('#container'),
                 filters = {};
                 $container.isotope({
                itemSelector: '.element',
                masonry: {
                    columnWidth: 260
                },
                getSortData: {
                    category: function($elem) {
                        if ($elem.is('.first_static')) {
                            return -1;
                        }
                        return $elem.attr('data-category');
                    },
                    date: function($elem) {
                        if ($elem.is('.first_static')) {
                            return -1;
                        }
                        return $elem.attr('data-expiry');
                    },
                    name: function($elem) {
                        if ($elem.is('.first_static')) {
                            return -1;
                        }
                        return $elem.find('.name').text();
                    },
                    first: function($elem) {
                        // sort by first_static first, then by original order
                        return ($elem.hasClass('first_static') ? -500 : 0) + $elem.index();
                    }
                },
                sortBy: 'first'
            });

                //sort page elements
                $('.sort a').click(function(e) {
                    var $this = $(this);
                    if ($this.hasClass('selected')) {
                        return false;
                    }
                    var $sortSet = $this.parents('.sort-set');
                    $sortSet.find('.selected').removeClass('selected');
                    $this.addClass('selected');
                    var sorts = {},
                            key = $sortSet.attr('data-option-key'),
                            value = $this.attr('data-option-value');

                    value = value === 'false' ? false : value;
                    sorts[ key ] = value;


            $container.isotope(sorts).isotope('reloadItems');

            return false;
        });

我正在研究一个JSFiddle（http://jsfiddle.net/AbUgj/30/）来演示我想要做什么。无论过滤器或排序如何，左上角应始终有一个蓝色框。

HTML

<h3>Sorting</h3><br />
                            <div class="option-combo sort">
                                <ul data-filter-group="sort" class="sort sort-set clearfix" data-option-key="sortBy">
                                    <li><a href="#" data-option-value="name">Name</a></li>
                                    <li><a href="#" data-option-value="category">Category</a></li>
                                    <li><a href="#" data-option-value="date">Expiry Date</a></li>

                                </ul>
                            </div>
                            <div class="option-combo sort">
                                <ul data-filter-group="sort" class="sort sort-set clearfix" data-option-key="sortAscending">
                                    <li><a href="#" data-option-value="true" id="sortByCatAsc">Ascending</a></li>
                                    <li><a href="#" data-option-value="false" id="sortByCatDesc">Descending</a></li>
                                </ul>
                        </div>

Answer 1

根据升序/降序模式创建不同的排序类别，如下所示：

...
name_asc: function($elem) {
    if ($elem.is('.first_static')) return "aaaa";
    return $elem.find('.name').text();
},
name_desc: function($elem) {
    if ($elem.is('.first_static')) return "zzzz";
    return $elem.find('.name').text();
},
...

要排序，您无需致电reloadItems：

$('#sortByNameAsc').click()(function() {
    $("#container")isotope({sortBy : 'name_asc', sortAscending : true});
});

$('#sortByNameDesc').click()(function() {
    $("#container").isotope({sortBy : 'name_desc', sortAscending : false});
});

或使用更通用的方法：

<div class="option-combo sort">
    <ul class="sort sort-set clearfix sortKey">
        <li><a href="#" data-option-value="name" class="selected">Name</a></li>
        <li><a href="#" data-option-value="category">Category</a></li>
        <li><a href="#" data-option-value="date">Expiry Date</a></li>
    </ul>
</div>
<div class="option-combo sort">
    <ul class="sort sort-set clearfix sortOrder">
        <li><a href="#" data-option-value="asc" class="selected">Ascending</a></li>
        <li><a href="#" data-option-value="desc">Descending</a></li>
    </ul>
</div>

脚本：

$('.sort a').click(function(e) {
    var $this = $(this);

    // Turn 'selected' class on/off
    if ($this.hasClass('selected')) return false;
    $this.parents('.sort-set').find('.selected').removeClass('selected');
    $this.addClass('selected');

    var key = $('.sortKey a.selected').attr('data-option-value');
    var order = $('.sortOrder a.selected').attr('data-option-value');

    var valBy = key + '_' + order; // For instance name_asc
    var valAscending = (order == "asc"); // true for 'asc', false otherwise

    $("#container").isotope({sortBy : valBy, sortAscending : valAscending});

    return false;
});

Jquery同位素 - 排序ASC DESC - 奇怪的行为

1 个答案: