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的原因{1}}元素。

你需要在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的直接子项，您还可以使用子项>选择器

$('#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+" />');

Demo

Answer 3

您可以使用.find查找任何后代：

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

使用jquery调用图像src

3 个答案: