我似乎遇到了我的JSON对象的问题,这很不寻常,因为我知道有一段代码可以工作:
function gotoPassage(id) {
for (var i = 0; i < passages.length; i++) {
if (passages[i].id == id) {
if (passages[i].bgImage)
changeBGImage(passages[i].bgImage);
$("#passage").hide();
$("#passage").html(passages[i].content);
$("#passage").fadeIn(1000);
}
}
}
上面的代码按预期工作,所以我假设了相同的逻辑并将其应用于我的其他代码,顺便说一下,这些代码无法正确呈现。此代码目前看起来像这样:
function showLoreHistory() {
$("#lore ul").html("");
for (var i = 0; i < foundLore.length; i++) {
var content = "<li><a href='javascript:gotoLore(" + foundLore[i].id ");'>";
for (var j = 0; j < lore.length; j++) {
if (lore[j].id == foundLore[i].id) {
content += lore[j].title + "</a></li>";
$("#lore ul").append(content);
break;
}
}
}
$("#lore").toggle();
}
lore
和foundLore
的结构如下所示:
var lore = [{
"id": 0,
"title": "The First War",
"image": "Images/The First War.jpg",
"pages": [{
"content": ""
}]
}];
var foundLore = [{
"id": 0
}];
我正在考虑迭代每个JSON对象的键,但发现它看起来很难看,并且考虑到我之前的逻辑显示段落工作假设相同的逻辑对我的传说有用,但似乎没有。
我会想出一个JSFiddle但不幸的是我依赖太多的本地资源来使其正常运行而不会牺牲代码,这将使我无法解释这个问题。
编辑:如果我在函数showLoreHistory
中注释掉for循环,页面将按照following image中的预期正确呈现。
编辑2:我要做的是从上面的JSON对象中获取值,并将值添加到HTML,在div标签lore
下 - 默认情况下是隐藏的。
Div标签及其内容如下所示:
<div id="lore">
<h1>Lore</h1>
<ul>
</ul>
</div>
如果您对此有任何解决方案,我将非常感谢。谢谢。
答案 0 :(得分:1)
这一行
var content = "<li><a href='javascript:gotoLore(" + foundLore[i].id ");'>";
在foundLore [i] .id
之后缺少'+'此外,切换可能不是您想要的。我认为你应该在函数的开头隐藏它,然后在你显示图像的其他函数中显示它。
如果您打开开发人员工具(f12或ctrl + shift + j),它会显示错误。
P.S。我花了不到2分钟的时间才找到问题的答案..下次再试一次。
http://jsfiddle.net/8cr9t1zy/2/ 由于我上面提到的toggle(),你必须按两次按钮。