我有一个链接列表,这些链接都属于不同的组。我想要一个看起来像过滤器的东西,按下该过滤器时只会使该组中的链接处于活动状态。
我是整个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
伪 seletor:
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
来表示分量更好吗?