更改循環中的img src屬性值 - jquery

Question

我有一個圖像旋轉木馬，我希望根據窗口寬度將src屬性值替換爲其他data-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 [I] .attr不是一個函數

有誰告訴我什麼是真正錯了我的功能背後的邏輯;爲什麼我得到錯誤信息，因爲我不認爲你需要在一個條件內有一個函數。

Answer 1

var imgCarousel = $('#mainCarousel .img-carousel');是匹配的元件的陣列。它只有DOM元素不是jQuery對象。所以在循環播放時&應用attr會引發錯誤。

在應用.attr方法之前，您需要將其轉換爲jquery對象。

您可以通過以下方式

$(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

與當前元素設定的src使用$(imgCarousel[i])而不是imgCarousel[i]。 imgCarousel[i]是標籤，$(imgCarousel[i])是jquery對象

Answer 4

您必須使用在下列方式$.attr()函數之前投的DOM元素引用jQuery對象：

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