Jak sprawdzić, czy ten sam obraz lub inny obraz lub coś innego niż obraz został kliknięty?

Question

Wykonuję sortowalny i skalowalny album zdjęć. Tam próbuję dodać funkcję, aby utworzyć obraz jako łącze.

1. Obraz kliknięciu

2. Następnie owinąć ten obraz z div, który wyświetla przycisk Edytuj w górnej części tego obrazu.

3. Po kliknięciu przycisku edycji zostanie wyświetlone okno dialogowe zawierające adres URL i nazwę tego obrazu.
4. A następnie zawiń obraz z a tag z podanym adresem URL i nazwą.

Demo na jsfiddle

Jest OK. Ale chciałbym zrobić:

• Kliknięcie tego samego obrazu nie powoduje ponownego zakleszczenia edytora div.
• Tylko w przypadku kliknięcia nowego obrazu zawiń edytor div.
• Jeśli klikniesz coś innego niż obrazek, usuń edytor div.

Jak mogę to osiągnąć? Myślę, że funkcja unwrap() usunie edytor div z obrazu, ale skąd będę wiedział, czy to ten sam obraz, czy coś innego?

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

Mam edytować swoje skrzypce wykazać możliwe rozwiązanie: jsfiddle

Aby sprawdzić pogoda obrazu jest aktualnie edytowany i dodać klasę. To później pomaga mi zidentyfikować aktualnie edytowany obraz. Dodałem ostrzeżenia, aby pokazać, kiedy trzeba przerwać tryb edycji.

Poniższy fragment pozwala uchwycić zdarzenie kliknięcia czegokolwiek oprócz obrazu.

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

Dodawanie event.stopPropagation() do onclick obrazów zatrzymuje $(document).on("click",... od robienia tego kliknięcia, jak również.

Answer 2

Aby uniknąć dodawania wielu owijarki można zrobić coś takiego:

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

I robić edycji:

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

Aby usunąć edycji flagę jeśli zostanie kliknięte coś innego:

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

oczywiście proponuję dodać inną klasę niż ui-sortable-handle do ciebie li s i użyć ich w powyższym kodzie, ponieważ mogą istnieć inne elementy z klasą "ui-sortable-handle" na twojej stronie.