尝试使用Javascript更改HTML中的img src

我试图使用Javascript在单击较小图像创建时将图像（id:big img）的src属性更改为较小图像（class:clicky）的src属性。不幸的是，它似乎不起作用。代码如下所示

HTML:

---

由于

clicky

不是

img

元素，因此它没有

src

属性，因此代码按预期工作

您需要遍历

img

元素以获取其属性，有多种方法可以实现这一点。在代码中，我使用了

.find（）

方法，因为

img

是

clicky

元素的子元素

$(".clicky").click(function(){
    $("#big-img").attr('src', $(this).find('img').attr('src'));
});

或者，您可以使用

img

元素绑定事件，这样代码就可以工作了

$(".clicky img").click(function(){
    $("#big-img").attr('src', this.src);
    //$("#big-img").attr('src',  $(this).attr('src'));
});

试试这个：

$(".clicky").click(function(){
  $("#big-img").attr('src',
    $(this).find('img').attr('src'));
});

$（此）

指单击的元素：

。您需要获取div内的

img

$(".clicky").click(function(){
  $("#big-img").attr('src',$('img', this).attr('src'));
});

要完成：

$(".clicky").on('click', function(e){
  $("#big-img").attr('src',$('img', this).attr('src'));
});

---

clicky类附加到div而不是img，因此它没有src属性

你能做的是：

$(".clicky > img").click(function(){
  $("#big-img").attr('src', $(this).attr('src'));
});

但是，如果要将侦听器附加到div上，可以执行以下操作：

$(".clicky").click(function(){
  $("#big-img").attr('src', $(this).find("img").attr('src'));
});

---

OP可能希望他的听众通过

div

而不是

img

我已经更新了我的答案人造丝，以防万一OP真的需要它为什么

e.preventDefault（）？为了防止页面在单击时向上滚动，现在您在此处询问它不需要，因为它是您所指的单击的div？虽然此代码可能会回答问题，但最好解释它如何解决问题以及为什么使用它。从长远来看，只使用代码的答案是没有用的。
$(".clicky > img").click(function(){
  $("#big-img").attr('src', $(this).attr('src'));
});

$(".clicky").click(function(){
  $("#big-img").attr('src', $(this).find("img").attr('src'));
});

function change_img(){
    $(document).on("click",".clicky img",function(){
        var el = $(this);
        var src = $.trim(el.attr("src"));
        (src !=="") ? $("#big-img").attr("src",src) : '';
    });
}

$(function(){
    change_img(); 
});