Попытка перебрать изображения и изменить URL src внутри идентификатора div, используя jquery / javascript - PullRequest
Новая
       37

Попытка перебрать изображения и изменить URL src внутри идентификатора div, используя jquery / javascript

0 голосов
/ 14 ноября 2018

Попытка перебрать все изображения в классе 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 ]

0 голосов
/ 14 ноября 2018

Более короткий способ написать это с помощью attr(attributeName, function).

Предполагается, что вы замените дублирующиеся идентификаторы и перейдете на класс 

$('.imgChange img').attr('src', function(_,i){
     return 'image' + i + '-' + orientationCheck() + '.png'
})
0 голосов
/ 14 ноября 2018

Вам не нужен 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/>
0 голосов
/ 14 ноября 2018

Ваш цикл входит в 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');
}
...