我有一个链接列表,这些链接都属于不同的组。我想拥有一个看起来像过滤器的东西,按下时只会让该组中的链接处于活动状态。
我是这整个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)
}
}
答案 0 :(得分:2)
使用字符串作为数据值,而不是布尔值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
更好地表示组件?