Question

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

点击图片
然后使用div显示该图像，该div在该图像的顶部显示一个编辑按钮。
当点击编辑按钮时，会出现一个对话框，输入该图像的网址和名称。
然后使用带有给定网址和名称的a tag包装图片。

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

如果点击相同的图片，请不要再次包装编辑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

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

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

我当然建议您向ui-sortable-handle添加除li之外的其他类，并在上面的代码中使用它们，因为可能还有其他类的元素＆＃39; ui-sortable-handle＆＃ 39;在你的页面。

Answer 2

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

要检查当前编辑的图像，我添加一个类。这有助于我识别当前编辑的图像。当你必须停止编辑模式时，我添加了警告显示。

以下代码段允许您捕捉点击图像以外的任何内容的事件。

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

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

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

2 个答案: