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

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

演示: http ://jsfiddle.net/RefT2/2/

Answer 2

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

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

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