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必须是唯一的。改为使用一个类：

$(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">

多个按钮触发单个jQuery功能

2 个答案: