在循环中更改 img src 属性值 - jquery

Question

我有一个带有图像的旋转木马，我希望根据 window 宽度将 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();
    });

我想要实现的是，当 window 宽度在 401px 和 767px 之间时，图像 src 值被替换为 data-src 值，并且 data-srctwo window 宽度为 >= 768px.

时的值

在构建我的功能时，我尽量做到合乎逻辑。但它就是行不通。无论是在缩小屏幕和刷新时，还是在直接调整浏览器大小时，src 属性值都不会改变 window。另外，我收到以下错误消息

imgCarousel[i].attr is not a function

谁能告诉我我的函数背后的逻辑到底出了什么问题；以及为什么我收到错误消息，因为我认为您不一定需要在条件内有一个函数。

Answer 1

您正在使用 jquery 功能，因此不需要 for loop。使用 each 将帮助您更轻松地通过 $(this)[将当前元素设置为 src]

 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 2

使用 $(imgCarousel[i]) 而不是 imgCarousel[i]。 imgCarousel[i] 是一个标签，$(imgCarousel[i]) 是一个 jquery 对象

Answer 3

在按以下方式使用 $.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();
    });

Answer 4

var imgCarousel = $('#mainCarousel .img-carousel'); 是匹配元素的数组。它只是 DOM 元素而不是 jquery 对象。因此，当遍历它并应用 attr 时，它会抛出一个错误。

您需要先将其转换为 jquery 对象，然后再对其应用 .attr 方法。

您可以通过以下任一方式引用当前元素

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

在循环中更改 img src 属性值 - jquery

Change img src attribute value in loop - jquery

javascript

jquery

function

src

attr