Question

我有一个链接列表，这些链接都属于不同的组。我想拥有一个看起来像过滤器的东西，按下时只会让该组中的链接处于活动状态。

我是这整个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)

    }


}

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更好地表示组件？

JQuery按数据属性过滤链接

1 个答案: