Javascript 如何在jQuery中使用循环自动绑定多个事件处理程序

Javascript 如何在jQuery中使用循环自动绑定多个事件处理程序,javascript,jquery,Javascript,Jquery,我正在开发一个模拟棋盘的简单应用程序。因此我有一张64格的桌子。我希望通过编写一个通过循环的函数来绑定每个方块的事件处理程序,而不是64次写出。编辑:请注意,我希望处理程序返回一个数值,以指示单击了哪个div。我不需要处理程序返回div的内容。以下是两个可单击div的简化版本: <div id="div0">A box</div> <div id="div1">Another box</div> <div id="say"></d

我正在开发一个模拟棋盘的简单应用程序。因此我有一张64格的桌子。我希望通过编写一个通过循环的函数来绑定每个方块的事件处理程序,而不是64次写出。编辑:请注意,我希望处理程序返回一个数值,以指示单击了哪个div。我不需要处理程序返回div的内容。以下是两个可单击div的简化版本:

<div id="div0">A box</div>
<div id="div1">Another box</div>
<div id="say"></div> 
盒子
另一个盒子
以及javascript代码:

$("#say").append("Which div are you going to click? ");

function clicky() {
    var i = 0;
    while (i < 2) {
        $("#div" + i).on("click", function () {
            $("#say").append("div" + i);
        });
        i++;
    }

}

clicky();
$(“#say”).append(“您要单击哪个div?”);
函数clicky(){
var i=0;
而(i<2){
$(#div“+i).在(“单击”)上,函数(){
$(“#say”)。追加(“div”+i);
});
i++;
}
}
clicky();
这是你的电话号码


该函数几乎可以工作,也就是说,它绑定到两个div,但它将相同(错误)的处理程序绑定到这两个div。不确定如何修复此问题。

将事件附加到64个方块不是正确的方法。您应该在这里使用事件冒泡。将事件附加到64个正方形的容器中。然后,如果捕获了事件,则可以确定事件目标

阅读有关资源中的事件冒泡的信息:

将事件附加到64个方块不是正确的方法。您应该在这里使用事件冒泡。将事件附加到64个正方形的容器中。然后,如果捕获了事件,则可以确定事件目标

阅读有关资源中的事件冒泡的信息:
使用公共类。然后可以使用绑定事件

HTML


使用公共类。然后可以使用绑定事件

HTML

试试这个:-

$("#say").append("Which div are you going to click? ");
function clicky()
{
var i = 0;
for(i;i<=2;i++)
{
    $('#div'+i).on('click',function(){
    $("#say").append($(this).html());
    });
 }

}

clicky();
$(“#say”).append(“您要单击哪个div?”);
函数clicky()
{
var i=0;
对于(i;i试试这个:-

$("#say").append("Which div are you going to click? ");
function clicky()
{
var i = 0;
for(i;i<=2;i++)
{
    $('#div'+i).on('click',function(){
    $("#say").append($(this).html());
    });
 }

}

clicky();
$(“#say”).append(“您要单击哪个div?”);
函数clicky()
{
var i=0;

对于(我;我错过了什么?我不知道为什么否决票。我喜欢使用这个.id。这对我来说很有意义。谢谢!我错过了什么吗?我不知道为什么否决票。我喜欢使用这个.id。这对我来说很有意义。谢谢!关于你的信息,你在这里面临结案关于你的信息,你在这里面临结案使用类比使用lo更有意义使用类比循环更有意义
$("#say").append("Which div are you going to click? ");
function clicky()
{
var i = 0;
for(i;i<=2;i++)
{
    $('#div'+i).on('click',function(){
    $("#say").append($(this).html());
    });
 }

}

clicky();