Question

我希望JavaScript能够根据您点击的项目查找项目信息，而不是为每个项目创建新功能。

我试图通过将id作为参数传递给JavaScript函数来做到这一点，但是找不到变量/数组。

运行代码时，它会在控制台中输出尖峰，但在尝试查找数组时它不起作用.z

我也尝试过使用value而不是id，但这也是一样的。

var withspike = document.getElementById('withspike');
var withid = document.getElementById('withid');
var spikes = {name:"Spikes", description:"Do not eat me.", damage:"500" };

function itemClicked(id) {
	console.log(id);
	document.getElementById('withspike').innerHTML = spikes["description"];
    document.getElementById('withid').innerHTML = id["description"];
}

<style>
  #spikes {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: #FF0000;
}
</style>

<div id="withspike"></div>
<div id="withid"></div>
<div onclick="itemClicked(id)" id="spikes"></div>

Answer 1

你可以将spikes（以及将来的其他元素）放在一个包含的对象中，并使用id从那里获取它：

var elements = {
   spikes:{name:"Spikes", description:"Do not eat me.", damage:"500" }
};

呼叫

elements[id]["description"];

Fiddle

一个包含多个元素的额外示例（在函数调用中使用此与id对比）：

Fiddle2

Answer 2

你应该使用它，传递元素本身，并遍历你想要的dom元素。

例如，使用：

<div id="withspike"></div>
<div id="withid"></div>
<div onclick="itemClicked(this)" id="spikes"></div>

您可以使用此功能：

function itemClicked(el) {
       var id = el.previousSibling.innerHTML; // Get previous sibling
       console.log(id);       
}

谢谢！

编辑。对不起，我使用了id，而我打算使用this！

Answer 3

避免混合HTML和JavaScript可能是明智之举。你可以这样做：

<div id="spikes"></div>

<script>
  var spikes = document.getElementById("spikes");
  spikes.addEventListener("click", function () {
    itemClicked(spikes);
  });
</script>

Javascript无法从函数参数中找到数组

3 个答案: