javascript - 查找单击了哪个框(或输入按键)

Question

我有 4 个容器，我需要知道单击了哪一个，或者当它们聚焦于输入框时按下“enter”键。

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

<强> JSFiddle

HTML(此处仅显示 2 个容器):

<div id="boxes">
    <div class="container e_type1" data-custom-data="e_type1">
        <div class="header"><h2>E Type 1</h2></div>
        <div class="image"></div>
        <div class="footer">
            <input type="text" name="item_level" value="1" class="item_level" min="1" step="1" required>
        </div>
    </div>
    <div class="container e_type2" data-custom-data="e_type2">
        <div class="header"><h2>E Type 2</h2></div>
        <div class="image"></div>
        <div class="footer">
            <input type="text" name="item_level" value="1" class="item_level" min="1" step="1" required>
        </div>
    </div>
</div>
<div id="dialog" title="Progress">
    <p>
        <div id="progressbar">
            <div class="progress-label"></div>
        </div>
    </p>
    <div id="message"></div>
</div>

JS 片段(完整代码可以在 JSFiddle 中找到)

// Image container was clicked.
//  Get data and send first Ajax request.
$(".image").click(function () {
    //console.log("Let's Start! Image container was clicked");
    $("#dialog").dialog("open");
    var e_type_var = $(".container").data("custom-data"),
        item_level_var = $(this).$("#item_level").val();
        alert(e_type_var + " was clicked");
    forgeAjax(e_type_var, item_level_var, 'first_req', function (error) {
        // By default, show Cancel button.
        $("#dialog").dialog({
            buttons: [{
                text: "Close",
                click: function () {
                    $(this).dialog("close");
                }
            }]
        });
        // Focus Cancel button
        $('.ui-dialog button:eq(1)').focus();
        // If there's no error returned, show Cancel and Button2 buttons.
        if (!error) {
            $("#dialog").dialog({
                buttons: {
                    'Cancel': function () {
                        $(this).dialog('close');
                    },
                        'Button2': function () {
                        $("#message").html("");
                        startProgressBar(e_type_var, item_level_var);
                    }
                }
            });
            // Focus Button2.
            $('.ui-dialog button:eq(2)').focus();
        }
    });
});

编辑:感谢大家指出id="item_level"。这是我的疏忽，但没有解释为什么代码不起作用。它已从问题中删除。

Answer 1

三个问题及其解决方案:

• ID 应该是唯一的。您将相同的 ID #item_level 应用于多个元素。但是您已经对它们应用了类似的 class，我们将仅使用它并从 HTML 中删除额外的 ID 属性。
• 您的 keypress 事件需要一种方法来判断哪个字段触发了该事件。我们通过使用 jQuery 的 .index() 来实现这一点。 方法。
• 您的 click 事件还需要一种方法来识别单击了两个图像中的哪一个。同样，.index() 在这里有所帮助。但我们还使用了一种名为 .eq() 的方法 我们将之前获取的索引提供给它。我希望我说得有道理。

看看这个 jsFiddle 并让我知道是否有帮助。

JavaScript:

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

希望这有帮助。