Question

有三个按钮。当我点击其中任何一个时 - 我想查看<span>中点击按钮的数量。

<button>1st button</button>
<button>2nd button</button>
<button>3rd button</button>

<span></span>

首先，我决定使用for循环，但我知道，它只保留最后一个值。

for ( var i = 0; i< 3; i++ ) {
    $('button:eq(' + i + ')').click(function() {
        $('span').append(i + 'button was clicked');
    });
}

jsFiddle

也许，$.each()功能会对我有帮助吗？

Answer 1

您不需要循环，只需绑定处理程序并使用.index()返回所选按钮的index。

$('button').click(function() {
    $('span').append($(this).index() + 'button was clicked');
});

DEMO： http://jsfiddle.net/RefT2/2/

Answer 2

你不需要循环。您可以使用.index()

$('button').click(function() {
    $('span').append($(this).index() + 'button was clicked');
});

当你可以拥有一个事件处理程序时，声明多个事件处理程序并不是一个好主意，你可以根据它执行的元素来处理它。上下文提供了足够的信息供您使用。如果您使用工具验证代码，例如JSLint，您会发现它建议不要在循环中声明函数。

Answer 3

虽然答案为您提供了替代/更好的方式来完成您所寻找的工作，但您需要closure (anonymous self executing function)

for (var i = 0; i < 3; i++) {
    (function (i) {
        $('button:eq(' + i + ')').click(function () {
            $('span').append((i + 1) + 'button was clicked');
        });
    }(i));
}

检查这个小提琴：http://jsfiddle.net/RefT2/1/

Answer 4

试试这个：

 $('button').click(function(){
        $('span').append(($(this).index()+1)  + 'button was clicked'); 
    });

演示：http://jsfiddle.net/RefT2/3/

如何在循环中声明事件处理程序？

4 个答案: