使用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");