JQuery 按数据属性过滤链接

Question

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

我是整个 JavaScript 游戏的新手，所以请多多包涵，因为我不完全确定它的功能是什么。

这是我正在努力完成的一个小sn-p，我希望它能够自我解释。

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)

    }


}

Answer 1

使用字符串作为数据值，而不是布尔值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 来指示组件更好吗？