尝试遍历图像并使用 jquery/javascript 在 div ID 内更改 src url

Question

尝试遍历 DIV class 中的所有图像，并根据从函数中检测到的 landscape/portrait 模式更改它们我不确定为什么它不起作用

   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>

Answer 1

您的循环进入 children 两次，实际图像只有一层深。同样正如@Ahmed Hammad 指出的那样，您不能在元素上有重复的 id 值 - 请改用 class。

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');
}

Answer 2

更短的写法是使用 attr(attributeName, function).

假设您替换了重复的 ID 并改为 class

$('.imgChange img').attr('src', function(_,i){
     return 'image' + i + '-' + orientationCheck() + '.png'
})

Answer 3

您不需要 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/>

尝试遍历图像并使用 jquery/javascript 在 div ID 内更改 src url

Trying to iterate through images & change src url within a div ID using jquery/javascript

javascript

jquery

loops

for-loop

src