标题可能非常令人困惑,但让我解释一下。我在左边有一个图片列表,我在所有图片上添加了onclick
功能,以显示图片和右侧的一些信息。我想这是左侧的某种缩略图,右侧是较大的版本,但一次只有一个。所以我使用所有文件名和循环的数组将左图放在容器中:
var ancients = [
"hunter",
"strangling-vines",
"quicksand",
"earthquake",
"eruption"
]
var ancients_list = "";
for (i = 0; i < ancients.length; i++) {
ancients_list += '<a id="' + ancients[i] + '"><img src="img/the-ancients/' + ancients[i] + '.png" height="120px" onclick="ancients(' + ancients[i] + ')" /></a>';
}
document.getElementById("ancients").innerHTML = ancients_list;
ancients
函数如下所示:
function ancients(name) {
var name2 = String(name);
document.getElementById("image").innerHTML = '<img src="img/the-ancients/' + name2 + '.png" />';
document.getElementById("info").innerHTML = 'the name of this piece is ' + name2;
}
这根本不起作用。我可以使用一个按钮调用HTML文件中的函数,并将name参数设为数字,然后它会显示在右侧;它就像我试图在循环中定义的名称参数不希望插入右侧的图像/文本中。在最终的HTML页面中,图像线工作正常;我明白了:
<img src="img/the-ancients/hunter.png" height="120px" onclick="ancients(hunter)">
我尝试了很多东西,但我只是不知道,也找不到我做错了什么,我正在考虑ancients
函数的参数和参数,但我真的不是肯定的。
此外,当我将typeof name2
放入信息部分时,它会返回String
。
答案 0 :(得分:2)
因为
onclick="ancients(' + ancients[i] + ')"
呈现为
onclick="ancients(hunter)"
所以你的代码正在寻找变量猎人,而不是字符串。您需要在字符串周围添加引号。
onclick="ancients(\'' + ancients[i] + '\')"
现在它将呈现为
onclick="ancients('hunter')"
现在,如果字符串包含'
,则会失败。
理想情况下,您只需使用数据属性并添加不显眼的事件处理程序。
function ancientsFnc(name) {
var name2 = String(name);
document.getElementById("info").innerHTML = 'the name of this piece is ' + name2;
}
var ancients = [
"hunter",
"strangling-vines",
"quicksand",
"earthquake",
"eruption"
]
var ancients_list = "";
for (i = 0; i < ancients.length; i++) {
ancients_list += '<a href="#" id="' + ancients[i] + '">' + ancients[i] + '</a>';
}
var ancientElem = document.getElementById("ancients");
ancientElem.innerHTML = ancients_list;
ancientElem.addEventListener("click", function(evt) {
var elem = evt.srcElement;
ancientsFnc(elem.id);
return false;
});
a {
display: block;
}
<div id="info"></div>
<div id="ancients"></div>