jquery - 更改按钮的功能

Question

我正在尝试将两个按钮合并为一个，用于名为 jsort 的 jquery 插件。单击可升序排序，再次单击可降序排序。我不知道如何应用其他解决方案，因为我完全是新手。

提前谢谢您!伊恩

这是代码(现在有两个不同的按钮):

http://jsfiddle.net/Lut37/22/

  //Sort Ascending by year
    $("#asc_btn_year").click(function () {
        $("#demo").jSort({
            sort_by: 'p.txt span',
            item: 'div',
            order: 'asc'
        });
    });

    //Sort Descending by year
    $("#desc_btn_year").click(function () {
        $("#demo").jSort({
            sort_by: 'p.txt span',
            item: 'div',
            order: 'desc'
        });
    });

Answer 1

使用变量来跟踪顺序，并每次翻转它。

var order = 'asc';

$("#btn_year").click(function () {
    order = (order == 'asc') ? 'desc' : 'asc'; // Toggle order
    $("#demo").jSort({
        sort_by: 'p.txt span',
        item: 'div',
        order: order
    });
});

如果您有多个这样的按钮，则可以使用 $(this).data('order') 而不是全局变量。

$("#btn_year").click(function () {
    order = $(this).data('order') == 'asc' ? 'desc' : 'asc';
    $(this).data('order', order);
    $("#demo").jSort({
        sort_by: 'p.txt span',
        item: 'div',
        order: order
    });
}).data('order', 'asc');