Question

我有一堆过滤选项，它们使用Jquery在一个简单的页面上更新DOM，该页面显示由JSON对象生成的呈现“stuff”列表。每个过滤器都可以很好地独立工作（see fiddle）但是，我希望它们更加连接。 I.E.假设我按性别过滤，然后我想搜索名称。或者，如果我按年龄过滤，则按活动状态过滤。我的过滤功能看起来像这样

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;
}

再次，请参阅fiddle

Answer 1

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

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

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

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

Answer 2

这样的事情：

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

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

通过JSON（javascript）构建嵌套过滤器

2 个答案: