将唯一的单击事件附加到Array JS的每个重复实例

Question

以下是具有相同重复实例且没有唯一标识符的三种表单的示例：

<form action="/haters"><input type="submit" value="stop hatin"></form>
<form action="/haters"><input type="submit" value="stop hatin"></form>
<form action="/haters"><input type="submit" value="stop hatin"></form>

如何将不同的console.log或由点击触发的任何消息附加到这些按钮中？

到目前为止，我使用jQuery Dom选择器$("form[action='/haters']")

来定位这些按钮

我也在codepen上发帖：http://codepen.io/marc313/pen/uphiv

请，谢谢！

Answer 1

集合中的每个项目都会有index个号码，您可以使用它来识别它们。

jQuery的：

$('input[type=submit]').eq(0).on('click', function() {
    console.log('This is unique to the FIRST submit button');
});
$('input[type=submit]').eq(1).on('click', function() {
    console.log('This is unique to the SECOND submit button');
});    
$('input[type=submit]').eq(2).on('click', function() {
    console.log('This is unique to the THIRD submit button');
});

The .eq() method表示“等于”，表示您在$('input[type=submit'])中选择的选择器的索引号。

如果您想系统地，可以将其放入for()或while()循环中。当然，您可以使用您想要用来标识按钮的任何数字替换eq(0)（从0开始是集合中的第一个元素，不大于$('input[type=submit]').length）。

这是CodePen的一个分支，可以看到alert()

Answer 2

虽然您可以单独绑定每个按钮，但在@ Deryck的答案中，通常这种做法会导致重复的代码。当点击3个按钮时，你的实际用例可能不会在控制台上记录3个不同的东西。

特别是如果这3个按钮执行类似的操作或者它们对同一组数据起作用，那么通常会更加干净地执行以下操作：

的jQuery

$('document').on('click', 'form[action=haters]', function() {
    /* This event will fire for any form with action="haters"
     * that is on your page. */

    var $clickedElement = $(this); // jQuery collection of the clicked element

   /* If you slightly modify your markup, as in the example below, you can
    * quickly uniquely identify each button, and act accordingly, like so: */

    var id = $clickedElement.attr('data-id');

    if(id === 1) {
        stuffForFirstButton();
    } else if(id === 2) {
        stuffForSecondButton();
    } else if(id === 3) {
        stuffForThirdButton();
    }
});

标记

<form action="/haters"><input type="submit" value="stop hatin" data-id="1"></form>
<form action="/haters"><input type="submit" value="stop hatin" data-id="2"></form>
<form action="/haters"><input type="submit" value="stop hatin" data-id="3"></form>

参考

• On calling .on() for event binding

Answer 3

我认为最好的方法是在此输入中添加名称，然后您可以通过名称获取每个输入并使用每个输入的点击功能。

<input type="submit" value="stop hatin" name="first">

$("#first").click(function() {
function
}