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

我正在制作可排序和可调整大小的图像相册。在那里，我试图添加一个功能来创建图像作为链接。如何检查是否点击了相同图像或其他图像或图像以外的其他图像

图像被点击
然后包裹该图像与显示在该图像的顶部上的编辑按钮一个div。
当点击编辑按钮时，将出现一个对话框，输入该图像的URL和名称。
然后用给定的url和名称包装a tag的图像。

这是确定。但我想要做的是：

如果单击相同的图像不要再次包装编辑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"); 
    }) 
}

来源

2015-09-15 Tikli Taba

只是分配一个属性，你可以检查 – WhiteHat

@WhiteHat喜欢？什么属性？ –

@TikliTaba只需添加类似于“包裹”或“编辑模式”的类或属性并在点击处理函数中检查。如果您添加的属性或类可用，则不要换行。 – Araknid

我编辑了自己的小提琴展示出一种可能的解决方案： jsfiddle

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

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

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

添加event.stopPropagation()到图像的onclick从捕获此点击以及停止$(document).on("click",...。

来源

2015-09-15 13:21:16 Abaddon666

我对你的代码进行了一些修改，以便从图像中解开并移除div和标签，但是它并没有像应该那样工作。你可以看看那个。 [jsfiddle]（http://jsfiddle.net/Tikz/pLk9kuo2/3/） –

我向编辑锚点添加了一个id。现在它应该做你想做的事情[jsFiddle]（http://jsfiddle.net/pLk9kuo2/4/）（编辑：改变链接到小提琴） – Abaddon666

为了避免增加了多个包装，你可以做这样的事情：

$('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-sortable-handle'的其他元素。

来源

2015-09-15 13:19:11

请您详细说明使用jsfiddle。 –

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

回答

相关问题