Question

我有对div进行排序的页面。基本上你可以点击按钮，它会对下面的div进行排序。这很好用。现在我想扩展一下但不确定如何。我想要做的是，当你按下例如年份排序按钮一次时，它会对DESC进行排序，但是当再次点击时，它会对ASC进行排序。

所以这是我目前的实施：

function sorting(parent, childSelector, sortKey) {
    var items = parent.children(childSelector).sort(function(a, b) {
        var vA = $(sortKey, a).text();
        var vB = $(sortKey, b).text();
        return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
    });
    parent.append(items);
}

$('#sPrice').data("sortKey", "span.price");
$('#sStyle').data("sortKey", "span.style");
$('#sYear').data("sortKey", "span.year");

$(".sort").click(function() {
   sorting($('#sortThis'), '.sortable', $(this).data("sortKey"));
});

HTML＆amp; jQuery示例在这里：http://codepen.io/anon/pen/NPGrJB

所以我想要的是，如果用户点击例如Style一次，它会对DESC进行排序，如果再次点击则会对ASC进行排序。

Answer 1

试试此演示：http://jsfiddle.net/lotusgodkk/GCu2D/477/

我使用了一个属性来存储最后一次排序是升序还是降序的值

JS：

function sortUsingNestedText(parent, childSelector, keySelector, dir) {
    var items = parent.children(childSelector).sort(function (a, b) {
        var vA = $(keySelector, a).text();
        var vB = $(keySelector, b).text();
        if (dir == 'up') return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
        else return (vA > vB) ? -1 : (vA < vB) ? 1 : 0;
    });
    parent.append(items);
}

/* setup sort attributes */
$('#sPrice').data("sortKey", "span.price");
$('#sStyle').data("sortKey", "span.style");
$('#sYear').data("sortKey", "span.year");

$('.show').click(function () {
    $(this).next('.extra_content').toggleClass('hidden');
});
/* sort on button click */
$("button.btnSort").click(function () {
    var asc = $(this).attr('asc') == 'up' ? 'down' : 'up';
    $(this).attr('asc', asc);
    sortUsingNestedText($('#sortThis'), "div", $(this).data("sortKey"), asc);
});

HTML：

<div id="sortThis">
    <div id="1">Price:<span class="price">20</span>  <span class="style">blue</span>  <span class="year">2014</span>  <span class="show">Show</span>
        <div class="extra_content hidden">Loremipsum</div>
    </div>
    <div id="2">Price:<span class="price">23</span>  <span class="style">red</span>  <span class="year">2009</span>  <span class="show">Show</span>
        <div class="extra_content hidden">Loremipsum</div>
    </div>
    <div id="3">Price:<span class="price">10</span>  <span class="style">red</span>  <span class="year">1999</span>  <span class="show">Show</span>
        <div class="extra_content hidden">Loremipsum</div>
    </div>
    <div id="4">Price:<span class="price">29</span>  <span class="style">green</span>  <span class="year">2012</span>  <span class="show">Show</span>
        <div class="extra_content hidden">Loremipsum</div>
    </div>
    <div id="5">Price:<span class="price">35</span>  <span class="style">blue</span>  <span class="year">2011</span>  <span class="show">Show</span>
        <div class="extra_content hidden">Loremipsum</div>
    </div>
</div>
<button asc='down' id="sPrice" class="btnSort">Sort By Price</button>
<br />
<button asc='down' id="sYear" class="btnSort">Sort By Year</button>
<br />
<button asc='down' id="sStyle" data-sortKey="span.style" class="btnSort">Sort By Style</button>
<br />

使用jQuery排序div

1 个答案: