4

我正在使用 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 只是一个假人 - 我真的不希望它做任何事情。

4

7 回答 7

5

如果你有图像元素的 id，你可以简单地使用remove方法。

$("#imgID").remove();
于 2009-08-12T09:36:16.070 回答
4

而不是使用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();
    }
);

这允许您创建一个变量来保存对您的图像的引用，以便您可以在预先设置后对其进行操作。

希望这可以帮助

于 2009-08-12T09:57:02.190 回答
1

如果在应用 prepend() 之前将节点的内容存储在变量中会怎样？

于 2009-08-12T09:32:55.560 回答
1

这可能是处理它的最佳方式 - 另外我认为它会为你预加载图像作为额外的奖励（虽然不是积极的）

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();

会找到第一个孩子并将其删除。不过要小心，如果该事件发生两次 - 它可能会删除的不仅仅是您的图像。

于 2009-08-12T09:38:25.440 回答
0

您可以将属性添加到前置元素并稍后找到它们以获取更多...

$("#hover-div").hover(
  function() {
    $("<img src='image.png' />").prependTo("#image-div").attr('prepended','yes');
  },
  function() {
    $("[prepended=yes]", "#image-div").remove();
  }
 );
于 2009-08-12T13:08:00.193 回答
0

最初真的是最好的选择吗？请记住，DOM 操作可能代价高昂，因此您可以采取任何措施来缓解这种情况

听起来您可能会更好地将图像放在背景中，并在将鼠标悬停在 div 上时切换它。

就像是：

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

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

或者，或者，使用 .hover

这是未经测试的，可以重构得更好，但考虑到我希望得到什么！

于 2009-08-12T09:40:18.637 回答
-1 
$("#image-div").prev().remove();

这将选择前一个元素并将其删除。

于 2009-08-12T09:31:24.863 回答