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

我正试图为一个游戏创造一个游戏环境，在这个游戏中，所有不同的div都会得到不同的onclick或eventlistener，因此div1会得到：

reageerOpKlikSpeelveld(1);

reageerOpKlikSpeelveld(2);

第2组将获得：

reageerOpKlikSpeelveld(1);

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);
            }
        }

我基本上不知道怎么做

---

提前谢谢

使用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];
}

---

使用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];
}

---

您可以将div的索引保存到div本身，然后通过“this”访问它

函数createDivsamount{ 对于x=0；x} 您可以将div的索引保存到div本身，然后通过“this”访问它

函数createDivsamount{ 对于x=0；x}不幸的是，我只能使用javascript，否则这将是一段很棒的代码。无论如何谢谢你！我在控制器的配置函数MVC Model中调用createDivs函数。以上所有功能都可以通过vanilla JS完成。如果我使用它，我的控制台会显示：ControllerMV.JS:33 Uncaught ReferenceError:$未定义。我只能使用javascript，否则这将是一段很棒的代码。无论如何谢谢你！我在控制器的配置函数MVC Model中调用createDivs函数。以上所有操作都可以用vanilla JS完成。如果我使用它，我的控制台会显示：ControllerMV.JS:33 Uncaught ReferenceError:$现在未定义，以编辑这些div的其他函数中的内容，例如divs[I].style.backgroundColor=浅灰色我该怎么办？我不明白你的问题。您只是想将所有div的背景色设置为相同的颜色吗？不管怎样，在做了一些修改之后，它就可以工作了，只需像这样定义var div:var divs=document.getElementsByClassNamevlakNow，就可以编辑这些div的其他函数中的内容，例如divs[i].style.backgroundColor=浅灰色我该怎么办？我不明白你的问题。您只是想将所有div的背景色设置为相同的颜色吗？不管怎样，在做了一些修改之后，它就可以工作了，只需要像这样定义var div:var divs=document.getElementsByClassNamevlak