Блог

Я использую функцию prepend() для воспроизведения изображения при наведении курсора на div. Как мне удалить изображение — т. е. что является противоположностью prepend()

Вот код:

 $("#hover-div").hover(
        function() { $("#image-div").prepend("<img src='images/arrow_redo.png' width='16' height='16' />"); },
        function() { $("#image-div").someFunction("<img src='images/arrow_redo.png' width='16' height='16' />"); }
        );
  

someFunction — это просто фиктивная функция — я действительно не ожидаю, что она что-нибудь сделает.

Если у вас есть идентификатор элемента image, вы можете просто использовать метод remove.

 $("#imgID").remove();
  

вместо использования prepend попробуйте использовать prependTo — позвольте мне продемонстрировать:

 var img;
$("#hover-div").hover(
    function() { 
        img = $("<img src='images/arrow_redo.png' width='16' height='16' />").prependTo("#image-div"); 
    },
    function() { 
        img.remove();
    }
);
  

Это позволяет вам создать переменную, которая содержит ссылку на ваше изображение, чтобы вы могли манипулировать ею после добавления.

Надеюсь, это поможет

Что, если вы сохраните содержимое узла в переменной перед применением функции prepend()?

Вероятно, это лучший способ справиться с этим — плюс, я думаю, что он все равно предварительно загрузит изображение для вас в качестве дополнительного бонуса (хотя и не положительного)

 var $img = $("<img src='images/arrow_redo.png' width='16' height='16' />");
$('#hover-div').hover(function() { 
  $('#image-div').prepend($img);
}, function() {
  $img.remove(); 
});
  

В противном случае:

 $(this).children().eq(0).remove(); 
  

нашел бы первый дочерний элемент и удалил его. Однако будьте осторожны, если событие произойдет дважды — оно может удалить не только ваше изображение.

Действительно ли добавление изначально является лучшим вариантом? Имейте в виду, что манипулирование DOM может быть дорогостоящим, поэтому все, что вы можете сделать, чтобы смягчить это, было бы хорошо

Похоже, было бы лучше, если бы изображение находилось в фоновом режиме и переключалось при наведении курсора мыши на div.

Что-то вроде:

 $("#MyDiv").mouseover(function(){
   $(this).find("img").toggle();
});

$("#MyDiv").mouseout(function(){
   $(this).find("img").toggle();
});
  

Или, в качестве альтернативы, используйте .наведите

Это непроверенное решение, которое может быть переработано, чтобы быть лучше, но, надеюсь, дает представление о том, к чему я клоню!

Вы можете добавить атрибут к добавленным элементам и найти их позже для получения дополнительных…

 $("#hover-div").hover(
  function() {
    $("<img src='image.png' />").prependTo("#image-div").attr('prepended','yes');
  },
  function() {
    $("[prepended=yes]", "#image-div").remove();
  }
 );
  

 $("#image-div").prev().remove();
  

Это позволило бы выделить предыдущий элемент и удалить его.