javascript - jQuery按数据属性过滤链接

我有一个链接列表，它们都属于不同的组。我想要一个看起来像过滤器的东西，当按下该过滤器时，只会使该组中的链接保持活动状态。

我是整个JavaScript游戏的新手，因此请耐心等待，因为我不确定自己的功能是什么。

这是我要完成的工作的一小段内容，希望它能自我解释。

http://jsfiddle.net/bardsworth/QCeXV/16/

var appNames = [
    ["What's Your Road?", "http://www.google.com", ["F0", "F1", "F2"]],
    ["Career Connect", "http://www.google.com", ["F0", "F1", "F2"]],
    ["FastForward", "http://www.google.com", []],
    ["Zombie College", "http://www.google.com", ["F0", "F1", "F2"]],
    ["WOOP", "http://www.google.com", ["F0", "F1", "F2"]],
    ["I'm First", "http://www.google.com", []],
    ["CollegeGo", "http://www.google.com", []],
    ["Logrado", "http://www.google.com", []],
    ["KRED", "http://www.google.com", []],
    ["College Connect", "http://www.google.com", []],
    ["Tractus Insight", "http://www.google.com", []],
    ["PossibilityU", "http://www.google.com", []],
    ["ApplyFul", "http://www.google.com", []],
    ["Raise", "http://www.google.com", []],
    ["College Abacus", "http://www.google.com", ["F0", "F1", "F2"]],
    ["FAFSA Community", "http://www.google.com", []],
    ["MyCoach", "http://www.google.com", []],
    ["GradGuru", "http://www.google.com", []],
    ["Transfer Bootcamp", "http://www.google.com", []]];

for (var i = 0; i < 10; i++) {
    createListHTML(i);

    // mapFilter function and stuff
    $("#mapFilter :checkbox").click(function () {

        // at this point what is the best way to loop through all my links and only keep active those that are associated with the check marks that are active.

        var a = $("a[data-" + $(this).val() + "= " + true + " ]");

        //a.hide(); // but i really want an enable

        /* this loops through all checked boxes which is kinda cool
           $("#mapFilter :checkbox:checked").each(function()
           {
           //$("." + $(this).val()).show();
           });
        */
    });}

function createListHTML($n) {
    // FACTORY
    var ul = $(".appList");

    var li = $('<li>').appendTo(ul);

    var link = $('<a>', {
        text: appNames[$n][0],
        title: appNames[$n][0],
        target: "_blank",
        href: appNames[$n][1],
        //click: function(){ BlahFunc( options.rowId );return false;}
    }).appendTo(li);

    /* is there a better way of adding these data attributes? i am open to being schooled as to waht is the best way */
    // filters
    var filterArray = appNames[$n][2];
    for (var a = 0; a < filterArray.length; a++) {
        link.data(filterArray[a], true)

    }


}

最佳答案

使用字符串作为数据值，而不是布尔值true，因为您构造的选择器与字符串匹配。

for (var a = 0; a < filterArray.length; a++) {
    link.data(filterArray[a], 'true');
}

然后在您的点击处理程序中，执行以下操作：

var a = $("a[data-" + $(this).val() + "=true]");

要获取所有不具有该属性的元素，可以使用:not伪选择器：

var a = $("a:not([data-" + $(this).val() + "=true])");

另一个建议。将数组用于同构线性集合，但将对象用于异构集合。因此，您的appNames应该类似于：

var appNames = [
    { name: "What's Your Road?", url: "http://www.google.com", filters: ["F0", "F1", "F2"]},
    { name: "Career Connect", url: "http://www.google.com", filters: ["F0", "F1", "F2"]]},
    ... and so on
];

然后，您可以通过以下方式访问这些组件：appNames[$n].name，appNames[$n].url和appNames[$n].filters。难道不是比无意义的数字0，1和2更好地表示组件了吗？