Изменить значение атрибута img src в цикле - jquery

Question

У меня есть карусель с изображениями, которые я бы хотел, чтобы значения атрибутов src были заменены другими значениями атрибутов src-данных в зависимости от ширины окна.

<div id="mainCarousel"> 
<img class="img-carousel" src="img/carousel-main-img2.jpg" data-src="img/carousel-main-datasrc-1.jpg" data-srctwo="img/carousel-main-datasrctwo-1.jpg"> 
<img class="img-carousel" src="img/carousel-main-img3.jpg" data-src="img/carousel-main-datasrc-2.jpg" data-srctwo="img/carousel-main-datasrctwo-2.jpg"> 

function carouselImages() { 

     // set window width in a variable 
     var winWidth = $(window).width(); 
     // set img DOM element in a variable 
     var imgCarousel = $('#mainCarousel .img-carousel'); 
     // declare empty variable for img 'data-src' attribute 
     var dataSrc = $(); 
     // declare empty variable for img 'data-srcTwo' attribute 
     var dataSrcTwo = $(); 

     //set loop which will iterate on each img DOM element 
     for(var i=0; i<imgCarousel.length; i++) { 
     // set first width range condition 
     if(winWidth > 400 && winWidth < 768) { 
      // if width matches condition, store the value of each DOM element's 'data-src' attribute in previously declared variable 
      dataSrc = imgCarousel[i].attr('data-src'); 
      // replace DOM element's 'src' attribute's value with 'data-src' attribute's value 
      imgCarousel[i].attr('src', dataSrc); 
     } 

     // set second width range condition 
     else if (winWidth >= 768) { 
      // if width matches condition, store the value of each DOM element's 'data-src' attribute in previously declared variable 
      dataSrcTwo = imgCarousel[i].attr('data-srcTwo'); 
      // replace DOM element's 'src' attribute's value with 'data-src' attribute's value 
      imgCarousel[i].attr('src', dataSrcTwo); 
     } 

     } 

    }; 

    $(document).ready(function(){ 
     carouselImages(); 
    }); 
    $(window).resize(function() { 
     carouselImages(); 
    }); 

То, что я хочу добиться того, что изображения src значения заменяются с data-src значениями, когда ширина окна между 401px и 767px, и с data-srctwo значениями, когда ширина окна >= 768px ,

Я старался быть максимально логичным при структурировании моей функции. Но это просто не работает. Значения атрибутов src вообще не меняются ни при уменьшении экрана, ни при обновлении, ни при прямом изменении размера окна браузера. Кроме того, я получаю следующее сообщение об ошибке

imgCarousel [я] .attr не является функцией

Может кто-нибудь сказать мне, что на самом деле не так с логикой позади моей функции; И почему я получаю сообщение об ошибке, поскольку я не думаю, что вам обязательно нужно иметь функцию внутри условия.

Answer 1

var imgCarousel = $('#mainCarousel .img-carousel'); представляет собой массив соответствующих элементов , Его единственный элемент DOM не является объектом jquery. Поэтому при переходе через него & с применением attr он выкинет ошибку.

Вам необходимо преобразовать его в объект jquery перед применением метода .attr.

Вы можете обратиться к текущему элементу любым из следующим образом

$(imgCarousel[i]).attr('data-src'); 

Answer 2

Вы используете функцию JQuery, так что не нужно for loop .Использование each поможет вам легко и установить ЦСИ с текущим элементом по $(this)

imgCarousel.each(function(){ 
     if(winWidth > 400 && winWidth < 768) { 
      data-src = $(this).attr("data-src"); 
      $(this).attr('src',data-src); 

     } 

     // set second width range condition 
     else if (winWidth >= 768) { 
     data-srcTwo = $(this).attr("data-srcTwo"); 
     $(this).attr('src',data-srcTwo); 

     } 
}); 

Answer 3

Использование $(imgCarousel[i]) вместо imgCarousel[i]. imgCarousel[i] является тегом, $(imgCarousel[i]) является объектом JQuery

Answer 4

Вы должны бросить ссылку элемента DOM для объекта JQuery, прежде чем использовать $.attr() функцию следующим образом:

function carouselImages() { 

     // set window width in a variable 
     var winWidth = $(window).width(); 
     // set img DOM element in a variable 
     var imgCarousel = $('#mainCarousel .img-carousel'); 
     // declare empty variable for img 'data-src' attribute 
     var dataSrc = $(); 
     // declare empty variable for img 'data-srcTwo' attribute 
     var dataSrcTwo = $(); 

     //set loop which will iterate on each img DOM element 
     for(var i=0; i<imgCarousel.length; i++) { 
     // set first width range condition 
     if(winWidth > 400 && winWidth < 768) { 
      // if width matches condition, store the value of each DOM element's 'data-src' attribute in previously declared variable 
      dataSrc = $(imgCarousel[i]).attr('data-src'); 
      // replace DOM element's 'src' attribute's value with 'data-src' attribute's value 
      $(imgCarousel[i]).attr('src', dataSrc); 
     } 

     // set second width range condition 
     else if (winWidth >= 768) { 
      // if width matches condition, store the value of each DOM element's 'data-src' attribute in previously declared variable 
      dataSrcTwo = $(imgCarousel[i]).attr('data-srcTwo'); 
      // replace DOM element's 'src' attribute's value with 'data-src' attribute's value 
      $(imgCarousel[i]).attr('src', dataSrcTwo); 
     } 

     } 

    }; 

    $(document).ready(function(){ 
     carouselImages(); 
    }); 
    $(window).resize(function() { 
     carouselImages(); 
    });