最终输出应该是具有desktop_categories的所有图像的列表：Jackpots。
所有游戏按钮显示所有图像：
//List all images in the ol #oneall
$.each(data.items, function(i, f) {
$("#oneall").append("<li><img src='" + f.image_180x100 + "' / ></li>");
});
另外两个按钮：热门游戏和老虎机，必须根据他们的desktop_categories显示图像：老虎机和热门游戏。
我希望这更有意义。 为了保持简单（因为我的javascript级别是初学者），我试图输出带有值的标题：“Vikingmania”。
但这部分不起作用：
//filter all title with the value "Vikingmania". This part doesn't work
$.filter(data.items, function(x) { return x.title.search("Vikingmania");
$("#twopopular").append("<li><p>'" + x.title + "'</p></li>");
});
控制台说这部分无法访问：
$("#twopopular").append("<li><p>'" + x.title + "'</p></li>");
（返回语句后无法访问的代码）
并且return语句未定义：
return x.title.search("Vikingmania");
TypeError：elem未定义
return elems.length === 1 && elem.nodeType === 1 ?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>game</title>
<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.5/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<link>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.5/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<!--<script type="text/javascript" src="foo.js"></script>-->
<style>
li {
float: left;
}
ol {
list-style-type: none;
}
div {
display: none;
}
</style>
</head>
<body>
<h3>Test</h3>
<button type="button" class="btn btn-primary" id="all">All Games</button>
<button type="button" class="btn btn-primary" id="jackpots">Jackpots</button>
<button type="button" class="btn btn-primary" id="popular">Popular Games</button>
<button type="button" class="btn btn-primary" id="slots">Slots</button>
<div id="one">
<ol id="oneall">
<li data-featherlight></li>
</ol>
</div>
<div id="two">
<ol id="twopopular"></ol>
</div>
<script>
var data = {
"items": [{
"title": "Frankie Dettori",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_fdt_180x100.jpg",
"desktop_categories_ids": "39,3,79",
"desktop_categories": "Popular Games,Slots,All Games"
}, {
"title": "Frankie Dettori",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_fdt_180x100.jpg",
"desktop_categories_ids": "39,3,79",
"desktop_categories": "Popular Games,Slots,All Games"
}, {
"title": "Desert Treasure Desktop",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_dt_180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
}, {
"title": "Vacation Station",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_er_180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
}, {
"title": "Vacation Station",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_er_180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
}, {
"title": "Hulk 25 Line",
"image_180x100": "https://www.supercasino.com/assets/GB/games/Hulk_180x100.jpg",
"desktop_categories_ids": "39,3,4,79",
"desktop_categories": "Popular Games,Slots,Jackpots,All Games"
}, {
"title": "Jackpot Darts",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_drts_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
}, {
"title": "Genie Hi-Lo",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_ghl_180x100.jpg",
"desktop_categories_ids": "79",
"desktop_categories": "All Games"
}, {
"title": "Gladiator",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_glr_180x100.jpg",
"desktop_categories_ids": "39,3,79",
"desktop_categories": "Popular Games,Slots,All Games"
}, {
"title": "Mr.Cashback",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc-mcb-180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
}, {
"title": "Great Blue",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc-bib-180x100.jpg",
"desktop_categories_ids": "39,3,79",
"desktop_categories": "Popular Games,Slots,All Games"
}, {
"title": "Wild Games",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_WILDGAMES_180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
}, {
"title": "Kong: Eighth Wonder of the World",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_Kong_180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
}, {
"title": "Iron Man 2 - 25 Line",
"image_180x100": "https://www.supercasino.com/assets/GB/games/Ironman2_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
}, {
"title": "Iron Man",
"image_180x100": "https://www.supercasino.com/assets/GB/games/IronMan_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
}, {
"title": "UK Blackjack",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_bjuk_180x100_v2.jpg",
"desktop_categories_ids": "2,79",
"desktop_categories": "Blackjack,All Games"
}, {
"title": "21 Duel Blackjack",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_bj21d_180x100_v2.jpg",
"desktop_categories_ids": "2,79",
"desktop_categories": "Blackjack,All Games"
}, {
"title": "Fantastic Four",
"image_180x100": "https://www.supercasino.com/assets/GB/games/FantasticFour_super_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
},
{
"title": "The Mummy",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_GAME_MUMMY.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
}, {
"title": "Desert Treasure II",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc-dt2-180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
}, {
"title": "X Men",
"image_180x100": "https://www.supercasino.com/assets/GB/games/Xmen_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
}, {
"title": "Daredevil",
"image_180x100": "https://www.supercasino.com/assets/GB/games/Daredevil_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
}, {
"title": "Rocky",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_rky_180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
}, {
"title": "Hulk 50 Line",
"image_180x100": "https://www.supercasino.com/assets/GB/games/Hulk50_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
}, {
"title": "Football Fans",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_GAME_FOOTBALL_FANS.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
}, {
"title": "Hot Gems",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_GAME_HOT_GEMS.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
}, {
"title": "Wings of Gold",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_GAME_WINGS_OF_GOLD.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
}, {
"title": "Goddess of Life",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_GAME_GODDESS_OF_LIFE.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
}, {
"title": "Vikingmania",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_GAME_VIKING_MANIA.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
}, {
"title": "Elektra",
"image_180x100": "https://www.supercasino.com/assets/GB/games/Elektra_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
}, {
"title": "Fantastic Four 50 Line",
"image_180x100": "https://www.supercasino.com/assets/GB/games/FantasticFour50_super_180x100.jpg",
"desktop_categories_ids": "39,3,4,79",
"desktop_categories": "Popular Games,Slots,Jackpots,All Games"
}, {
"title": "Iron Man 2 50 Line",
"image_180x100": "https://www.supercasino.com/assets/GB/games/IronMan250_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
}, {
"title": "Wild Spirit",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_WILDSPIRIT_180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
}
]
};
//List all images in the ol #oneall
$.each(data.items, function(i, f) {
$("#oneall").append("<li><img src='" + f.image_180x100 + "' / ></li>");
});
//toggles the div #one with the ol #oneall
$('#all').click(function() {
$("#one").toggle();
});
//filter all title with the value "Vikingmania". This part doesn't work
$.filter(data.items, function(x) { return x.title.search("Vikingmania");
$("#twopopular").append("<li><p>'" + x.title + "'</p></li>");
});
//toggles the div #two with the ol #twopopular
$('#popular').click(function() {
$("#two").toggle();
});
</script>
</body>
</html>
这项任务应该很简单，但我似乎无法获得正确的结果，而且我是json / javascript的新手。
我需要根据它们的价值对desktop_categories进行排序：热门游戏，老虎机，所有游戏，Jackpots ..等等。在单击功能中。
首先，我试图将数据解析为数组。
我试图列出所有具有Jackpots值的desktop_categories。
相反，我得到所有的desktop_categories。
我究竟做错了什么？
非常感谢。
var json = [{
"title": "Frankie Dettori",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_fdt_180x100.jpg",
"desktop_categories_ids": "39,3,79",
"desktop_categories": "Popular Games,Slots,All Games"
},
{
"title": "Frankie Dettori",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_fdt_180x100.jpg",
"desktop_categories_ids": "39,3,79",
"desktop_categories": "Popular Games,Slots,All Games"
},
{
"title": "Desert Treasure Desktop",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_dt_180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
},
{
"title": "Vacation Station",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_er_180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
},
{
"title": "Vacation Station",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_er_180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
},
{
"title": "Hulk 25 Line",
"image_180x100": "https://www.supercasino.com/assets/GB/games/Hulk_180x100.jpg",
"desktop_categories_ids": "39,3,4,79",
"desktop_categories": "Popular Games,Slots,Jackpots,All Games"
},
{
"title": "Jackpot Darts",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_drts_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
},
{
"title": "Genie Hi-Lo",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_ghl_180x100.jpg",
"desktop_categories_ids": "79",
"desktop_categories": "All Games"
},
{
"title": "Gladiator",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_glr_180x100.jpg",
"desktop_categories_ids": "39,3,79",
"desktop_categories": "Popular Games,Slots,All Games"
},
{
"title": "Mr.Cashback",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc-mcb-180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
},
{
"title": "Great Blue",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc-bib-180x100.jpg",
"desktop_categories_ids": "39,3,79",
"desktop_categories": "Popular Games,Slots,All Games"
},
{
"title": "Wild Games",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_WILDGAMES_180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
},
{
"title": "Kong: Eighth Wonder of the World",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_Kong_180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
},
{
"title": "Iron Man 2 - 25 Line",
"image_180x100": "https://www.supercasino.com/assets/GB/games/Ironman2_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
},
{
"title": "Iron Man",
"image_180x100": "https://www.supercasino.com/assets/GB/games/IronMan_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
},
{
"title": "UK Blackjack",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_bjuk_180x100_v2.jpg",
"desktop_categories_ids": "2,79",
"desktop_categories": "Blackjack,All Games"
},
{
"title": "21 Duel Blackjack",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_bj21d_180x100_v2.jpg",
"desktop_categories_ids": "2,79",
"desktop_categories": "Blackjack,All Games"
},
{
"title": "Fantastic Four",
"image_180x100": "https://www.supercasino.com/assets/GB/games/FantasticFour_super_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
},
{
"title": "The Mummy",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_GAME_MUMMY.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
},
{
"title": "Desert Treasure II",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc-dt2-180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
},
{
"title": "X Men",
"image_180x100": "https://www.supercasino.com/assets/GB/games/Xmen_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
},
{
"title": "Daredevil",
"image_180x100": "https://www.supercasino.com/assets/GB/games/Daredevil_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
},
{
"title": "Rocky",
"image_180x100": "https://www.supercasino.com/assets/GB/games/sc_rky_180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
},
{
"title": "Hulk 50 Line",
"image_180x100": "https://www.supercasino.com/assets/GB/games/Hulk50_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
},
{
"title": "Football Fans",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_GAME_FOOTBALL_FANS.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
},
{
"title": "Hot Gems",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_GAME_HOT_GEMS.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
},
{
"title": "Wings of Gold",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_GAME_WINGS_OF_GOLD.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
},
{
"title": "Goddess of Life",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_GAME_GODDESS_OF_LIFE.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
},
{
"title": "Vikingmania",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_GAME_VIKING_MANIA.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
},
{
"title": "Elektra",
"image_180x100": "https://www.supercasino.com/assets/GB/games/Elektra_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
},
{
"title": "Fantastic Four 50 Line",
"image_180x100": "https://www.supercasino.com/assets/GB/games/FantasticFour50_super_180x100.jpg",
"desktop_categories_ids": "39,3,4,79",
"desktop_categories": "Popular Games,Slots,Jackpots,All Games"
},
{
"title": "Iron Man 2 50 Line",
"image_180x100": "https://www.supercasino.com/assets/GB/games/IronMan250_180x100.jpg",
"desktop_categories_ids": "3,4,79",
"desktop_categories": "Slots,Jackpots,All Games"
},
{
"title": "Wild Spirit",
"image_180x100": "https://www.supercasino.com/assets/GB/games/SC_WILDSPIRIT_180x100.jpg",
"desktop_categories_ids": "3,79",
"desktop_categories": "Slots,All Games"
}];
var parsed = {};
for (var i = 0, iLen = json.length; i < iLen; i++) {
// Assuming all we need are the desktop_categories and a list
var desktop_categories;
var list = [];
for (var key in json[i]) {
var value = json[i][key];
// We need to hold on to the desktop_categories with value "Jackpots"
if (key === "desktop_categories") {
desktop_categories = value;
} else if (value === "Jackpots") {
list.push(key);
}
}
// Add them to the parsed array
// List them in plain text
parsed[desktop_categories] = list.join(", ");
}
// List them on the web page
for (var key in parsed) {
document.write(key + ": " + parsed[key] + "<br>");
}
答案 0 :(得分：0)
一些事情：
1）您只使用n (8)的最后一个值，因为每次执行for循环时都会覆盖它。
2）desktop_categories仅在value === "Jackpots"完全匹配时才为真，例如value
3）数组方法（过滤器，地图）更加简洁明了。
尝试将输出打印到控制台或单步执行代码。