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');

Answer 2

只要boolean在范围内有一个，如果是true，做一个，，false做另一个，并确保boolean每次都更改值。

例如，

var myBoolean = true;

$("#btn_year").click(function () {
    if(myBoolean){
        myBoolean = false;
        $("#demo").jSort({
            sort_by: 'p.txt span',
            item: 'div',
            order: 'asc'
        });
    }else {
        myBoolean = true;
        $("#demo").jSort({
            sort_by: 'p.txt span',
            item: 'div',
            order: 'desc'
        });
    }
});