Question

我正在尝试为游戏制作一个游戏场，其中所有单独的div获得不同的onclick或eventlistener，因此div 1将得到：

reageerOpKlikSpeelveld(1);

div 2会得到：

reageerOpKlikSpeelveld(2);

这是在页面上创建我的div的功能：

function createDivs(amount) {
    for(x=0; x<amount;x++) {
            var vlak = document.createElement('div');
            vlak.className = "vlak";
            document.getElementsByClassName("veld")[0].appendChild(vlak);
            }
        }

我基本上不知道该怎么做。

提前致谢！

Answer 1

您可以将div的索引保存到div本身，然后通过＆＃39; this＆＃39;来访问它。

＆＃13;

function createDivs(amount) {
  for (x = 0; x < amount; x++) {
    var vlak = document.createElement('div');
    
    
    vlak.myIndex = x;
    vlak.onclick = function() {
        reageerOpKlikSpeelveld(this.myIndex);
    };
    
    
    vlak.className = "vlak";
    document.getElementsByClassName("veld")[0].appendChild(vlak);
  }
}

＆＃13;

Answer 2

使用jQuery，您可以编写如下内容：

function createDivs(amount) {
    for(x=0; x<amount;x++) {
        var vlak = $(document).add("div");
        $(vlak).addClass("vlak");
        $(vlak).attr("id", "MyId-" + x);
    }
}

$(document).ready(function() {
    createDivs(10);

    $(".vlak").on(click, function() {
        var id = $(this).attr("id");
        var tab = id.split("-");
        reageerOpKlikSpeelveld(tab[1]);
    });
});

在此处，您可以在文档准备就绪时生成10个div。然后，点击事件将绑定所有div。

在原生Javascript中：

function createDivs(amount) {
    for(x=0; x<amount;x++) {
        var vlak = document.createElement('div');
        vlak.className = "vlak";
        vlak.id = "MyId-" + x;
        vlak.onclick = function(e) { 
            reageerOpKlikSpeelveld(e.target.id) 
        };
        document.getElementsByClassName("veld")[0].appendChild(vlak);
    }
}

function reageerOpKlikSpeelveld(itemid) {
    var tab = itemid.split("-");
    var id = tab[1];
}

将onclick或eventlistener添加到id为div的Createelement

2 个答案: