我有 3 个图像都在同一个类名“image”内
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageHolder" style="width: 80%; display: inline;">
<div class="image">
<img src="//i.stack.imgur.com/nO2hl.png">
</div>
<div class="image">
<img src="//i.stack.imgur.com/IkjJW.png">
</div>
<div class="image">
<img src="//i.stack.imgur.com/QrKSV.png">
</div>
</div>
我只想用不同的图像链接替换第二张图像。所以我尝试了这样的事情:
$('.image').find('img').attr('src', 'http://cdn.shopify.com/s/files/1/1061/1924/products/Smiling_Face_Emoji_with_Blushed_Cheeks_grande.png?v=1480481056');
但是,这会替换所有图像,而不仅仅是第二个图像,所以我尝试这样做 $('.image')[1].find(..)...
,但这不起作用我收到错误:Uncaught TypeError: $(...)[1].find is not a function
.
如果有人能解释我做错了什么以及如何解决这个问题,我将不胜感激?
谢谢。
最佳答案
您已经非常接近了 - find()
将返回一个数组,并且您希望将更改应用于单个元素:
$($('.image').find('img')[1]).attr('src', 'http://cdn.shopify.com/s/files/1/1061/1924/products/Smiling_Face_Emoji_with_Blushed_Cheeks_grande.png?v=1480481056');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageHolder" style="width: 80%; display: inline;">
<div class="image">
<img src="//i.stack.imgur.com/nO2hl.png">
</div>
<div class="image">
<img src="//i.stack.imgur.com/IkjJW.png">
</div>
<div class="image">
<img src="//i.stack.imgur.com/QrKSV.png">
</div>
</div>
关于javascript - 替换具有相同类名的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49389515/