尝试迭代图像&使用jquery/javascript在div ID中更改src url
尝试迭代图像&使用jquery/javascript在div ID中更改src url
提问于 2018-11-14 15:45:56
尝试迭代DIV类中的所有图像，并根据从函数中检测到的景景/肖像模式将它们更改，我不知道为什么不能工作。
for(var i = 0; i < $('#imgChange').children().length; i++){
var img = $('#imgChange').children[i];
// deviceOrientation - imageDimensions
// portrait-landscape, portrait-portrait, landscape-portrait, landscape-landscape
// img.children[i].attr('src','image' + i + '-' + orientationCheck() + '.png');
img.children[0].attr('src','image' + i + '-' + orientationCheck() + '.png');
}
}测试第一张图像。其余的还没有改变
<div class="content" id="imgChange" custom-bg="1542111504805.png" >
<img src="image0-portrait.png"/>
</div>
</div><div class="slide">
<div class="content" id="imgChange" custom-bg="1542111396159.png" >
<img src="1542110991156.png"/>
</div>
</div><div class="slide">
<div class="content" id="imgChange" custom-bg="1542106085955.png" >
<img src="1542110993877.png"/>
</div>
</div><div class="slide">
<div class="content" custom-bg="1542106179480.png" >
<img src="1542110996555.png">
</div>回答 3
Stack Overflow用户
回答已采纳
发布于 2018-11-14 15:52:40
您的循环将两次进入children，而实际图像只有一个层次深度。同样，正如@Ahmed所指出的，元素上不可能有重复的id值--而是使用一个类。
for(var i = 0; i < $('.imgChange').length; i++){
var img = $('.imgChange')[i];
// deviceOrientation - imageDimensions
// portrait-landscape, portrait-portrait, landscape-portrait, landscape-landscape
// img.children[i].attr('src','image' + i + '-' + orientationCheck() + '.png');
$(img.children[0]).attr('src','image' + i + '-' + orientationCheck() + '.png');
}Stack Overflow用户
发布于 2018-11-14 16:02:03
写这个的方法更短，就是使用attr(attributeName, function)。
假设您替换了重复的id并改为类
$('.imgChange img').attr('src', function(_,i){
return 'image' + i + '-' + orientationCheck() + '.png'
})Stack Overflow用户
发布于 2018-11-14 16:06:30
您不需要Jquery。记住ID属性值应该是唯一的。您不能使用id="imgChange"超过一次。试试这个：
let imgs = document.querySelectorAll('.imgChange img')
for(i=0;i<imgs.length;i++){
img = imgs[i];
img.src = "https://www.gravatar.com/avatar/ea55d4ade339de113b9720c933546564?s=48&d=identicon&r=PG&f=1"
//img.attr('src','image' + i + '-' + orientationCheck() + '.png');
}.imgChange{
border: 1px solid red;
}<div class="imgChange">
<img/>
<div/>
<div class="imgChange">
<img/>
<div/>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53303937
复制相关文章
相似问题
腾讯云开发者
