改变img src属性值在循环- jquery

Change img src attribute value in loop - jquery

本文关键字：循环 jquery img src 属性 改变      更新时间：2023-09-26

我有一个carousel图像，我想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();
    });

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

在构造函数时，我试图尽可能地合乎逻辑。但这行不通。无论是缩小屏幕和刷新，还是直接调整浏览器窗口的大小，src属性值都不会改变。另外，我得到以下错误消息

imgCarousel[我]。Attr不是函数

谁能告诉我我的函数背后的逻辑到底出了什么问题?为什么我得到错误信息，因为我认为你不一定需要在条件中有一个函数

var imgCarousel = $('#mainCarousel .img-carousel');是一个匹配元素的数组。它只是一个DOM元素而不是一个jquery对象。所以当它循环时&如果应用attr，则会抛出错误。

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

你可以通过以下方式之一来引用当前元素

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

在使用$.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();
    });

你正在使用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);
        }
 });

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

相关文章：