jquery点击替换为另一个图像

Posted 2023-05-09

【中文标题】jquery点击替换为另一个图像

【英文标题】：jquery on click replace with another image

【发布时间】：2012-10-29 05:37:12

【问题描述】：

当我单击添加图像 div 时，我应该用另一个背景为白色的十字图像替换当前图像

你能告诉我如何完成它吗...：http://jsfiddle.net/6MmMe/11/

交叉图像https://docs.google.com/file/d/0B3IBJKENGE7ReWpack5aWmdLSmc/edit

$("div").hover(
  function () 
    $(this).append($("<div>add image</div>"));
  , 
  function () 
    $(this).find("div:last").remove();
  
);

【问题讨论】：

您知道，其他窗格的存在是有原因的。至少把你的js、html和css分开。

这个$(this).find("div:last").remove(); 看起来很脆弱。

这就是你的小提琴的样子：jsfiddle.net/9b7rS

jsfiddle.net/6MmMe/13这是你想要的吗？

初始图像的大小与您要替换它的大小不同。我误解了你的问题吗？

【参考方案1】：

$(".container").on("click", function()
    $(this).find('img').attr('src', 'https://lh3.googleusercontent.com/m7_Lya1KfrYkW1_i1ZyiTrDu6xazZzfvEvG2I6vS7L66QMYQhbhfDxw5SGLu6o-7d5q0y8HY-zVyudf2');                         
); 

【参考方案2】：

最直接的方法是改变<div>的子<img>的src属性：

$("div").hover(
    ....
).click(function() 
    $(this).children("img").attr("src", "newUrl");
);

见http://jsfiddle.net/6MmMe/15/

更新：如果您想在点击“添加图片”div 时更改图片，您可以使用以下代码

$("div").hover(
  function () 
    $("<div>add image</div>").click(function () 
        $(this).parent().children("img").attr("src", "newUrl");
    ).appendTo(this);
  , 
  function () 
    $(this).find("div:last").remove();
  
);

见http://jsfiddle.net/6MmMe/20/

【讨论】：

感谢您的回复...点击应该只适用于这个添加图片而不是整个图片

当新图像进入 add image 时应该消失

@user1781238: 那么你可以在$(this).remove();里面插入click handler: jsfiddle.net/6MmMe/21

@user1781238：您只需拨打unbind("hover") <div>：jsfiddle.net/6MmMe/23