找到哪個框被點擊（或輸入按鍵）

Question

我有4個容器，我需要知道哪一個被點擊，或者當他們在輸入框上關注時按下「回車」鍵。

我該如何修改我的代碼才能做到這一點？

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

EDIT ：謝謝大家指出id="item_level"。這是我的一個疏忽，並沒有解釋爲什麼代碼不起作用。它已從問題中刪除。

Answer 1

三個問題及其解決方案：

• 的ID都應該是獨一無二的。您將相同的ID #item_level應用於多個元素。但是您已經應用了類似的class，我們將使用它並從HTML中刪除額外的ID屬性。
• 您的keypress事件需要一種方法來確定哪個字段激發了該事件。我們通過使用jQuery的.index()方法來實現。
• 您的click事件還需要一種方法來識別兩個圖像中的哪一個被點擊。再次，.index()幫助這裏。但是我們也使用了一個叫做.eq()的方法，我們爲之前提取的index提供了一個方法。我希望我在這裏有意義。

看看這個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(); 
    } 
}); 

希望這有助於。

Answer 2

您可以更改

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

通過

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

$（e.target）是產生事件的元素（記住通過電子事件功能）

最接近

用這個選擇器搜索近親。

https://api.jquery.com/closest/

對於按鍵，您可以使用類名作爲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(); 

這沒有改變你的代碼，很可能在這裏，我直接調用函數

我更新了代碼http://jsfiddle.net/qjs7c86v/71/

Answer 3

你的JSFiddle有這個：

$('#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> 

和

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

所以，你可以添加其他$('#item_level').keypress(function ...或者只是改變你的選擇，以查找類具有相同名稱：

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

---

更多關於jQuery選擇： http://www.w3schools.com/jquery/jquery_selectors.asp

個