尝试使用 jquery/javascript 遍历图像并更改 div ID 中的 src url答案

【问题标题】：Trying to iterate through images & change src url within a div ID using jquery/javascript尝试使用 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>

【问题讨论】：

您不能有重复的 id，请改用 class。

标签： javascript jquery loops for-loop src

【解决方案1】：

您的循环将进入children 两次，而实际图像只有一层深度。同样正如@Ahmed Hammad 指出的那样，您的元素上不能有重复的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');
}

【讨论】：

img.children[0] 不是 jQuery 对象
控制台日志img，这是什么？顺便说一句，您需要在 html 中将“id”更改为“class”
img 是 dom 元素，img.children[0] 也是如此，而 dom 元素没有 attr() 方法...这是一个 jQuery 方法
哦，我明白你的意思了，我虽然是 OP。感谢您指出这一点！

【解决方案2】：

使用attr(attributeName, function) 编写此代码的更短方式。

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

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

【讨论】：

【解决方案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/>

【讨论】：