将 JQuery 过滤栏绑定到排序列表

Question

我有一个 JSON 数组加载到 JQuery 移动列表中。我有 4 个单选按钮来对列表进行排序。一切正常。

另外，我有一个过滤栏来搜索排序的结果。因此，假设我按价格升序对列表进行了排序，我可以使用过滤栏搜索列表。但是如果我点击价格降序，列表会自动刷新为默认值。

所以我要做的是按名称升序排序，使用搜索栏过滤结果，如果我单击另一个排序按钮，列表不会刷新。

我希望你能理解我，我已经尽可能清楚地解释了这一点。这是我的代码：

var productList = {"products": [
    {"brand": "brand1", "description": "Product 1", "price": "03.25 "},
    {"brand": "brand2", "description": "Product 4", "price": "01.10 "},
    {"brand": "brand3", "description": "Product 3", "price": "04.21 "},
    {"brand": "brand4", "description": "Product 2", "price": "15.24 "},
    {"brand": "brand5", "description": "Product 5", "price": "01.52 "},
    {"brand": "brand6", "description": "Product 6", "price": "12.01 "},
    {"brand": "brand7", "description": "Product 7", "price": "05.24 "}

]
};

$(document).ready(function() {

console.debug('ready');

$('#sort > input[type = "radio"]').next('label').click( function(event, el) {


    console.debug($(event.currentTarget).prev('input').attr('id'));

    sortID = $(event.currentTarget).prev('input').attr('id');

    refresh(sortID);
});


});

function refresh(sortID) {

var list = $("#productList").listview();
$(list).empty();


var prods = productList.products.sort(function(a, b) {

    switch (sortID) {
    case 'sort-a-z':
       return a.description > b.description;

    case 'sort-z-a':
        return a.description < b.description;

    case 'sort-price-up':
        return parseInt(a.price) > parseInt(b.price);

    case 'sort-price-down':
        return parseInt(a.price) < parseInt(b.price);

    default:
        return a.description > b.description;

}

});
$.each(prods, function() {
    list.append("<li>" + this.description + "  :       " + this.price + "</li>");
});

$(list).listview("refresh");

}

Answer 1

我不确定到底是什么问题，但我知道您不应该使用 parseInt 来比较价格。

• parseInt 在看到非数字时停止。
• 如果传递给 parseInt 的第一个字符为 0，则字符串以 8 为基数而不是 10 为基数计算。在 8 基数中，8 和 9 不是数字，因此 parseInt("08") 和 parseInt("09" ) 产生 0 作为结果。

parseInt 可以带一个基数参数，因此 parseInt("08", 10) 产生 8。

为了获得最佳结果，请使用 parseFloat，然后将结果乘以 100 以产生一个整数 - 然后当您比较价格时，您将避免 javascript 浮点系统的所有怪癖。

除了你分享的代码在我看来还不错。