Question

我是非常 Javascript的新手（以及一般的编程），所以如果这是一个愚蠢的问题，请原谅我：

我有以下循环，为数组中的每个项目生成div：

for (i=0;i<inventory.length;i++)
{
    document.getElementById('inventoryitems').innerHTML += "<div class='itemblock'>" + inventory[i] + "</div>";
}

我希望每个项目能够在单击时将变量（在数组中的名称，理想情况下）传递给名为useItem(itemName)的函数。任何人都有任何想法我应该怎么做呢？我试过了

document.getElementById('inventoryitems').innerHTML += "<div class='itemblock'>" + inventory[i] + "</div>";
inventory[i].onclick = useItem(inventory[i]);

和

document.getElementById('inventoryitems').innerHTML += "<div class='itemblock' onClick='useItem(" + inventory[i] + ")'>" + inventory[i] + "</div>";

但似乎都不起作用。非常感谢大家提供的任何帮助。

编辑：非常感谢大家的快速解答！我决定采用卡米尔的解决方案。再次感谢大家！

Answer 1

DOM不知道哪个元素与哪个点击事件有关，所以什么都不会发生。如果在div元素中添加id字段会发生什么？

"<div class='itemblock' id=" + inventory[i] + ">" + inventory[i] + "</div>"

当然，这提供了所有库存商品都是唯一的。如果有效，请告诉我。

Answer 2

我个人会做以下事情：

for (i=0;i<inventory.length;i++) {
    document.getElementById('inventoryitems').innerHTML += "<div class='itemblock'>" + inventory[i] + "</div>";
     inventory[i].onclick = useItem;
}

这会将实际元素传递给useItem函数，然后可以通过inventory.indexOf( this )在数组中找到该函数，或者只通过this.innerHTML函数中的useItem获取内容

您的inventory[i].onclick = useItem(inventory[i]);无法正常工作的原因是它在分配期间调用了您的useItem函数，而不是仅仅告诉它在点击期间调用该函数。

如果这还不够，请给我更多关于你问题的背景信息，我很乐意进一步提供帮助。

Answer 3

试试这个：

var items = document.getElementsByClassName("item");

for(i =0;i< items.length;i++){
    items[i].onclick = function(){
        useItem(this);
    };
}

function useItem(el){
  alert(el.innerHTML);
}

在这里您可以尝试它的工作原理：http://jsfiddle.net/Q3AYC/

Answer 4

以下是循环使用querySelectorAll来获取要迭代的项目列表然后添加click事件的基础知识。 IE8有一个不同的事件模型attachEvent，因此您需要使用if语句。但这就是基础

 <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <div class="clickable">01</div>
        <div class="clickable">02</div>
        <div class="clickable">03</div>
        <div class="clickable">04</div>
        <div class="clickable">05</div>
    </body>
    </html>

<script>

    function addEvent(element, evt, fn){
        //fn is a function
        //evt is your event
        if(window.addEventListener){

            element.addEventListener(evt, fn, false);

        } else {
            //IE8
            element.attachEvent("on" + evt, fn);

        }

    }

    var func = function(){ alert("hello") };

    var elements = document.querySelectorAll(".clickable");
    for(var i = 0; i < elements.length; i++){

        addEvent(elements[i], "click", func);
        elements[i].innerHTML = "content added " + i;

    }

</script>

从循环生成可单击的函数

4 个答案: