我正在开发一个模拟棋盘的简单应用程序。因此我有一个64个方格的桌子。我想通过编写一个循环而不是写出64次的函数来为每个方块绑定事件处理程序。编辑:请注意我希望处理程序返回一个数字值来指示单击了哪个div。我不需要处理程序来返回div的内容。这是给出两个可点击的div的简化版本:
I am working on a simple app that simulates a chess board. Therefore I have a table with 64 squares. I would like to bind event handlers for each square by writing a single function that goes through a loop instead of writing things out 64 times. Please note I want the handlers to return a numeric value to indicate which div was clicked. I don't need the handlers to return the content of the divs. Here is a simplified version given two clickable divs:
<div id="div0">A box</div> <div id="div1">Another box</div> <div id="say"></div>和javascript代码:
and the javascript code:
$("#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,但是它将相同(错误)的处理程序绑定到它们。不知道如何解决这个问题。
The function almost works, that is, it binds to both divs, but it binds the same (wrong) handler to both of them. Not sure how to fix this.
推荐答案使用公共类。然后,您可以使用类选择器(.class)绑定事件
Use a common class. Then you can use Class Selector (".class") to bind event
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
更多推荐
如何使用jQuery中的循环自动绑定多个事件处理程序
发布评论