多個按鈕來觸發單個jQuery功能

Question

我想使用多個圖像打開相同的jQuery對話框。我注意到，這隻適用於第一個圖像，有沒有辦法讓第二個圖像工作，而沒有給它一個唯一的ID？這些圖像將有100多個，因此我不想爲每個圖像創建一個新功能。

$(function() { 
      $("#dialog").dialog({ 
       autoOpen: false},{ buttons: [ { text: "Ok", click: function() { $(this).dialog("close"); } } ]}); 
      $("#IMG").on("click", function() { 
       $("#dialog").dialog("open"); 
      }); 
     }); 

<div id="dialog" title="Dialog box">Test</div> 

<input type="image" id="IMG" src="img/image.gif"> 
<input type="image" id="IMG" src="img/image.gif"> 

Answer 1

爲每個圖像指定一個類，例如「img」。然後申報這樣的處理程序：

$(".img").on("click", function() { 
    $("#dialog").dialog("open"); 
}); 

Answer 2

ID必須unqiue。使用類，而不是：

$(function() { 
      $("#dialog").dialog({ 
       autoOpen: false},{ buttons: [ { text: "Ok", click: function() { $(this).dialog("close"); } } ]}); 
      $(".open-img").on("click", function() { 
       $("#dialog").dialog("open"); 
      }); 
     }); 

HTML：

<div id="dialog" title="Dialog box">Test</div> 

<input type="image" class="open-img" src="img/image.gif"> 
<input type="image" class="open-img" src="img/image.gif">