Question

标题可能非常令人困惑，但让我解释一下。我在左边有一个图片列表，我在所有图片上添加了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。

Answer 1

因为

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>

无法将函数参数作为字符串在函数本身中使用

1 个答案: