jquery点击替换为另一个图像答案

【问题标题】：jquery on click replace with another imagejquery点击替换为另一个图像
【发布时间】：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这是你想要的吗？
初始图像的大小与您要替换它的大小不同。我误解了你的问题吗？

标签： jquery-ui jquery jquery-plugins jqgrid

【解决方案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