Javascript 查找单击的框（或输入keypress）

我有4个容器，我需要知道哪一个被点击了，或者当他们在关注输入框时按下“回车”键

我如何修改代码才能做到这一点

$('.image').click(function () {
    $('#dialog').dialog('open');
    var e_type_var = $(this).parent().data('custom-data'),
        item_level_var = $(this).siblings('.footer').find('.item_level').val();
    forgeAjax(e_type_var, item_level_var, 'first_req', function (error) {
        $('#dialog').dialog({
            buttons: [{
                text: 'Close',
                click: function () {
                    $(this).dialog('close');
                }
            }]
        });
        $('.ui-dialog button:eq(1)').focus();
        if (!error) {
            $('#dialog').dialog({
                buttons: {
                    'Cancel': function () {
                        $(this).dialog('close');
                    },
                        'Button2': function () {
                        $('#message').html('');
                        startProgressBar(e_type_var, item_level_var);
                    }
                }
            });
            $('.ui-dialog button:eq(2)').focus();
        }
    });
});
$('.item_level').keypress(function (e) {
    if (e.which == 13) {
        $('.image').eq($('.item_level').index(this)).click();
    }
});

HTML（此处仅显示2个容器）：

编辑：感谢大家指出

id=“item\u level”

。这是我的疏忽，但没有解释为什么代码不起作用。并且它已从问题中删除。

您可以更改

$(".image").click(function () {
    //console.log("Let's Start! Image container was clicked");
    $("#dialog").dialog("open");
    var e_type_var = $(".container").data("custom-data"),

借

$（e.target）是生成事件的元素（记住在事件函数中传递e）

使用此选择器搜索最近的父对象

对于按键，您可以使用aznbanana9所说的类名，并且使用相同的策略

$('.item_level').keypress(function (e) {
    // Enter was pressed while in the input box.
    if (e.which == 13) {
        // Send .image container click.
        $(e.target).closest('.container').find('.image').click();

这不需要更改代码，可能在这里我直接调用函数

---

我更新了代码

您的JSFIDLE有以下内容：

$('#item_level').keypress(function (e) {
      // Enter was pressed while in the input box.
      if (e.which == 13) {
          // Send .image container click.
          $('.image').click();
      }
});

它基于

id

选择元素。但是您的输入具有相同的

id

字段，这些字段应该是唯一的：

<input type="text" name="item_level1" value="1" id="item_level" class="item_level" min="1" step="1" required>

---

---

关于jQuery选择器的更多信息：

三个问题及其解决方案：

• ID应该是唯一的。您对多个元素应用了相同的ID

  #item_level

  。但是您已经对它们应用了类似的

  类

  ，我们将使用它并从HTML中删除额外的ID属性
• 您的

  keypress

  事件需要一种方法来告诉哪个字段触发了该事件。我们通过使用jQuery的方法来实现这一点
• 您的

  click

  事件还需要一种方法来识别单击了两个图像中的哪一个。同样，

  .index（）

  在这里也有帮助。但我们也使用一个名为的方法，将先前获取的

  索引提供给该方法。我希望我在这里讲得有道理

看看这个，如果有帮助，请告诉我

JavaScript:

---

希望这能有所帮助。

您可能希望从

项目级别

元素中删除id属性，因为id应该是唯一的。您已经在使用它们的

class

属性，所以通过

class

获取这些元素应该可以了。@TahirAhmed忘了删除这些元素，谢谢您指出了这一点，但并没有解决问题。太棒了！另一个答案可行，但我最喜欢这个解决方案。非常感谢。

$('#item_level').keypress(function (e) {
      // Enter was pressed while in the input box.
      if (e.which == 13) {
          // Send .image container click.
          $('.image').click();
      }
});

<input type="text" name="item_level1" value="1" id="item_level" class="item_level" min="1" step="1" required>

<input type="text" name="item_level2" value="1" id="item_level" class="item_level" min="1" step="1" required>

$('.item_level').keypress(function (e) {
      // Enter was pressed while in the input box.
      if (e.which == 13) {
          // Send .image container click.
          $('.image').click();
      }
});

$('.image').click(function () {
    $('#dialog').dialog('open');
    var e_type_var = $(this).parent().data('custom-data'),
        item_level_var = $(this).siblings('.footer').find('.item_level').val();
    forgeAjax(e_type_var, item_level_var, 'first_req', function (error) {
        $('#dialog').dialog({
            buttons: [{
                text: 'Close',
                click: function () {
                    $(this).dialog('close');
                }
            }]
        });
        $('.ui-dialog button:eq(1)').focus();
        if (!error) {
            $('#dialog').dialog({
                buttons: {
                    'Cancel': function () {
                        $(this).dialog('close');
                    },
                        'Button2': function () {
                        $('#message').html('');
                        startProgressBar(e_type_var, item_level_var);
                    }
                }
            });
            $('.ui-dialog button:eq(2)').focus();
        }
    });
});
$('.item_level').keypress(function (e) {
    if (e.which == 13) {
        $('.image').eq($('.item_level').index(this)).click();
    }
});