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

Question

我正在制作一张可分类且可调整大小的图像相册.在那里,我试图添加一个功能来创建图像作为链接.

1. 单击图像

2. 然后用div显示该图像,该div在该图像的顶部显示一个编辑按钮.

3. 当单击编辑按钮时,将出现一个对话框,输入该图像的URL和名称.
4. 然后a tag使用给定的URL和名称包装图像.

演示 jsfiddle

还行吧.但我想做的是:

• 如果单击相同的图像,请不要再次包装编辑div.
• 仅当单击新图像时才包装编辑div.
• 如果单击图像以外的其他内容,请删除编辑div.

我怎样才能做到这一点？我认为unwrap()将从图像中删除编辑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");
    })
}

Answer 1

我编辑了你的小提琴来演示一个可能的解决方案： jsfiddle

要检查图像当前是否已编辑，我添加一个类。这稍后可以帮助我识别当前编辑的图像。我添加了警报以显示您何时必须停止编辑模式。

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

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

添加event.stopPropagation()到图像的 onCLick 也会阻止$(document).on("click",...捕获此点击。