Question

我正在开发一个模拟棋盘的简单应用程序。因此我有一个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();

这是jsfiddle。

该函数几乎可以工作，也就是说，它绑定到两个div，但它将相同（错误）的处理程序绑定到它们。不知道如何解决这个问题。

Answer 1

使用普通类。然后，您可以使用Class Selector (“.class”)绑定事件

HTML 的

<div class='myDiv' id="div0">div0</div>
<div class='myDiv' id="div1">div1</div>
<div id="say"></div>

脚本

$("#say").append("Which div are you going to click? ");
$(".myDiv").on("click", function () {
    $("#say").append(this.id);
});

DEMO

Answer 2

试试这个： -

$("#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();

Demo

Answer 3

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

从资源中了解事件冒泡： http://javascript.info/tutorial/bubbling-and-capturing

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

3 个答案: