Javascript 如何检查是否单击了相同的图像或其他图像或图像以外的其他内容

我正在制作一个可排序和可调整大小的相册。在这里，我试图添加一个功能来创建图像作为链接

单击图像

然后用一个div包装该图像，该div在该图像顶部显示一个编辑按钮

单击“编辑”按钮时，将出现一个对话框，用于输入该图像的url和名称

然后用带有给定url和名称的标签包装图像

演示

这没关系。但我想做的是：

• 如果单击了相同的图像，则不要再次包装编辑div
• 仅当单击了新图像时，才会将编辑div换行
• 如果单击了图像以外的内容，请删除编辑div

我怎样才能做到这一点？我认为unwrap（）将是从图像中删除edit div的诀窍，但我如何知道它是同一图像，还是其他图像

js代码段：

$('#sortable li img').on("click", function () {
    $image = $(this);
    image_resize($image);
    edit_image($image);
});

function edit_image(image) {
    image.wrap('<div id="edit-image"></div>');
    $('#edit-image').prepend('<a href="#">EDIT</a>');
    $("#edit-image a").center(true).css("cursor", "pointer").css("z-index", "1");
    $('#edit-image a').on("click", function () {
        alert("clicked on edit");
        if (image.parent().is("a")) {
            var img_link = image.parent().attr("href");
            var img_name = image.parent().attr("alt");
            $('#image_link_dialog #input #link').val(img_link);
            $('#image_link_dialog #input #name').val(img_name);
        }
        $('#image_link_dialog').css("display", "block").css("z-index", "2");
        $('#image_link_dialog').center(false);
        $('#image_link_dialog').draggable();
    });
    $('#image_link_dialog .dialog_handle a').on("click", function () {
        if (!$('#image_link_dialog #input #name').val() == '') {
            var img_name = $('#image_link_dialog #input #name').val();
            console.log('img_name: ' + img_name);
        }
        if (!$('#image_link_dialog #input #link').val() == '') {
            var img_link = $('#image_link_dialog #input #link').val();
            console.log('img_link: ' + img_link);
            if (img_name) {
                if (image.parent().is("a")) {
                    image.parent().attr("alt", img_name);
                    image.parent().attr("href", img_link);
                } else {
                    image.wrap(function () {
                        return "<a class='img_a' href='" + img_link + "' alt='" + img_name + "'></a>";
                    });
                }
            } else {
                if (image.parent().is("a")) {
                    image.parent().attr("href", img_link);
                } else {
                    image.wrap(function () {
                        return "<a class='img_a' href='" + img_link + "'></a>";
                    })
                }

            }
        } else {
            alert('please enter link url');
        }
        $('#image_link_dialog #input #link').val('');
        $('#image_link_dialog #input #name').val('');
        $('#image_link_dialog').css("display", "none");
    })
}

$（'#可排序li img'）。在（“单击”，函数（）{
$image=$（这个）；
图像_调整大小（$image）；
编辑图片（$image）；
});
功能编辑_图像（图像）{
image.wrap（“”）；
$（“#编辑图像”）。前置（“”）；
$（“#编辑图像a”）.center（true）.css（“光标”、“指针”）.css（“z索引”、“1”）；
$（“#编辑图像a”）。在（“单击”上，函数（）{
警报（“点击编辑”）；
if（image.parent（）是（“a”））{
var img_link=image.parent（）.attr（“href”）；
var img_name=image.parent（）.attr（“alt”）；
$（'image#u link#dialog#input#link'）.val（img#u link）；
$（'#image#u link_dialog#input#name'）.val（img#u name）；
}
$（'#image_link_dialog'）.css（“display”，“block”）.css（“z-index”，“2”）；
$（“#图像_链接_对话框”）.center（false）；
$（“#图像_链接_对话框”）.draggable（）；
});
$（'#图像链接对话框。对话框句柄a'）。打开（“单击”，函数（）{
if（！$（'#图像链接对话框#输入#名称'）.val（）=''）{
var img#u name=$（“#图像#u链接_对话框#输入#名称”）.val（）；
console.log（'img_name:'+img_name）；
}
if（！$（“#图像#链接#对话框#输入#链接”）.val（）=''）{
var img_link=$（“#图像_link_对话框#输入#链接”）.val（）；
日志（'img_链接：'+img_链接）；
如果（img_名称）{
if（image.parent（）是（“a”））{
image.parent（）.attr（“alt”，img_名称）；
image.parent（）.attr（“href”，img_链接）；
}否则{
image.wrap（函数（）{
返回“”；
});
}
}否则{
if（image.parent（）是（“a”））{
image.parent（）.attr（“href”，img_链接）；
}否则{
image.wrap（函数（）{
返回“”；
})
}
}
}否则{
警报（'请输入链接url'）；
}
$（“#图像链接#对话框#输入#链接”）.val（“”）；
$（'#图像链接#对话框#输入#名称'）.val（''）；
$（'#image_link_dialog'）.css（“显示”、“无”）；
})
}

要避免添加多个包装器，可以执行以下操作：

$('li.ui-sortable-handle').click(function(){
     $('li.ui-sortable-handle').removeClass('edit-image'); //remove previously selected images
     $(this).addClass('edit-image');
});

要进行编辑：

$('body').on('click','.edit-image', function(){
    //do whatever you want. the click event is as example edit and it to any event that suits you
});

要在单击其他内容时删除编辑标志，请执行以下操作：

$('body').on('click','*',function(e){
    if(!$(this).hasClass('.ui-sortable-handle') $('li.ui-sortable-handle').removeClass('edit-image');
e.stopPropagation();
});

---

当然，我建议您在

li

s中添加另一个类，而不是

ui可排序句柄

，并在上面的代码中使用它们，因为在您的页面中可能有其他具有类“ui可排序句柄”的元素。

我编辑了您的小提琴，以演示一种可能的解决方案：

要检查当前是否编辑了图像，我添加了一个类。这将帮助我识别当前编辑的图像。 我添加了提醒，以显示何时必须停止编辑模式

下面的代码片段允许您捕获单击除图像以外的任何内容的事件

$(document).on("click", function (event) {
     alert('stop edit for current image'); 
});

---

将

event.stopPropagation（）

添加到图像的onCLick会停止

$（文档）。在（“单击”上，…

也会捕获此单击。

只需指定一个属性即可check@WhiteHat比如？什么属性？@TikliTaba只需添加一个类或属性，比如“包装”或“编辑模式”并在click handler函数中检查。如果您添加的属性或类可用，则不要包装。只需制作一个，然后在（请您详细说明一下如何使用JSFIDLE。我对您的代码进行了一些修改，以从图像中展开并删除div和标记，但它并没有按照预期的方式工作。请您检查一下。我在编辑锚中添加了一个id。现在它应该可以做您希望它做的事情了（编辑：将链接更改为FIDLE）