使用jQuery调用图像src

Question

我在div中有一张图片。 以下是当前的div结构。

<div id="imgHolder">
   <img class="smallthumb" src="imgHolder.png">
</div>

如何使用jquery调用图像并获得与上述相同的输出？

我尝试了这个：

$('#imgHolder').attr("src", "profile.png");

但是最后的输出是：

<div id="imgHolder" class="smallthumb" src="imgHolder.png"></div>

Answer 1

imgHolder是div元素的ID，因此#imgHolder将引用div元素，这就是为什么将src添加到div元素的原因。

您需要在div中查找图像，以便可以将后代选择器与id选择器一起使用，例如

$('#imgHolder img').attr("src", "profile.png");

 $('button').click(function() { $('#imgHolder img').attr("src", "//placehold.it/64X64&text=profile"); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="imgHolder"> <img class="smallthumb" src="//placehold.it/64X64&text=holder"> </div> <button>Change</button> 

Answer 2

您需要选择img改变的属性img 。

$('#imgHolder img').attr("src", "profile.png");

由于img是div的直接子级，因此您也可以使用children >选择器

$('#imgHolder>img').attr("src", "profile.png");

演示版

 $('#imgHolder > img').attr('src', 'profile.png'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div id="imgHolder"> <img class="smallthumb" src="imgHolder.png"> </div> 

---

更新资料

如果要动态添加图像：

$('#imgHolder').html('<img src="http://img42.com/kzCbY+" />');

演示版

Answer 3

您可以使用.find来查找任何后代，例如：

$('#imgHolder').find('img').attr("src", "profile.png");