0

我有一堆过滤选项，它们使用 Jquery 来更新一个简单页面上的 DOM，该页面显示由 JSON 对象生成的渲染“东西”列表。每个过滤器都可以独立工作（参见小提琴）但是，我希望它们之间的联系更加紧密。IE 假设我按性别过滤，然后我想搜索一个名字。或者，如果我按最小年龄过滤，则按活动状态过滤。我的过滤功能看起来像这样

function sortByAge(value) {
    document.getElementById("range").innerHTML= value;
    var data = getData();
    var length = data.result.length;
    var htmlSlug = "";

    for (var i=0; i< length; i++) {
        if (data.result[i].age >= value){ 
            htmlSlug += writeHTML(data,i);
        }
    }
    if (!htmlSlug) htmlSlug = "Nothing Found";
    $('.data-container').html(htmlSlug);
}

function writeHTML(data, i) {
    //this gets called any time we need to build html to the DOM
    var active = "";
    if (data.result[i].isActive == true) {
        var active = "active";
    }
    var slug = '<div class="member-card-container '+active+'">'+
            '<div class="info">'+
                '<span class="name">'+data.result[i].name+'</span> '+
                '<span class="gender">'+data.result[i].gender+ '</span> '+
                '<span class="age">'+data.result[i].age+'</span>'+
                '<span class="latitude">'+data.result[i].latitude+'</span>'+
                '<span class="longitude">'+data.result[i].longitude+'</span>'+
            '</div>'+
            '<div class="address">'+data.result[i].address+'</div>'+
        '</div>';
    return slug;
}

再次，看小提琴

4

2 回答 2

1

修改您的过滤器函数以接受 JSON 数据作为参数并返回过滤后的列表。不要在过滤器函数中编写 HTML。

创建一个接受 JSON 作为参数的写入 HTML 函数，循环遍历列表并将所有元素写入页面。

如果这样做，您将能够按顺序调用过滤函数，将前一个过滤器的返回值（JSON 列表）传递给下一个过滤器。

最后，调用您的 write HTML 函数将结果写入页面。

于 2013-08-05T23:52:43.690 回答
0

像这样的东西：

function byAgeAsc(r1,r2) { return r2.age - r1.age; }
function byAgeDesc(r1,r2) { return r1.age - r2.age; }

var data = data.result.sort(byAgeAsc).filter(function(r) { return r.age > value } );

dataset 将被排序和过滤并准备好呈现。例如通过 mustache.js 或我的kite.js模板引擎。

于 2013-08-06T00:05:46.687 回答