Come verificare se è stata selezionata la stessa immagine o un'altra immagine o qualcosa di diverso dall'immagine

Question

Sto realizzando un album di immagini ordinabili e ridimensionabili. Lì, sto cercando di aggiungere una funzionalità per creare l'immagine come collegamento.

1. immagine viene cliccato

2. Poi avvolgere l'immagine con un div che visualizza un pulsante Modifica in cima a quello dell'immagine.

3. E quando si fa clic sul pulsante di modifica, viene visualizzata una finestra di dialogo per inserire l'url e il nome per quell'immagine.
4. E quindi avvolgere l'immagine con un a tag con l'url e il nome specificati.

Demo a jsfiddle

Questo è ok. Ma quello che vorrei fare è:

• Se si fa clic sulla stessa immagine, non spostare di nuovo il div di modifica.
• Solo se si fa clic su una nuova immagine, avvolgere il div di modifica.
• E se si fa clic su un elemento diverso dall'immagine, rimuovere il div di modifica.

Come posso ottenere questo risultato? Penso che unwrap() farà il trucco per rimuovere il div di editing dall'immagine, ma come faccio a sapere se è la stessa immagine o qualcosa di diverso da quello?

js snippet:

$('#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

Ho modificato il vostro violino per dimostrare una possibile soluzione: jsfiddle

Per controllare wether un'immagine è attualmente editato aggiungo una classe. Più tardi questo mi aiuta a identificare l'immagine attualmente modificata. Ho aggiunto degli avvisi per mostrare quando è necessario interrompere la modalità di modifica.

Il seguente frammento consente di catturare l'evento di fare clic su qualsiasi elemento tranne un'immagine.

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

Aggiunta event.stopPropagation() al onclick delle immagini arresta il $(document).on("click",... da catturare questo scatto pure.

Answer 2

per evitare di aggiungere più involucri si può fare qualcosa di simile:

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

e per fare l'editing:

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

Per rimuovere modificare flag se qualcos'altro viene cliccato:

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

ovviamente suggerisco di aggiungere un'altra classe diversa da li s e di utilizzarla nel codice precedente perché potrebbero esserci altri elementi con la classe 'ui-sortable-handle' nella pagina.