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

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

在构造我的函数时，我试图尽可能合乎逻辑。但它只是不起作用。在减少屏幕和刷新时，以及直接调整浏览器窗口大小时，src属性值都不会发生变化。另外，我收到以下错误消息

imgCarousel [i] .attr不是函数

有人能告诉我我的功能背后的逻辑究竟是什么？为什么我收到错误消息，因为我认为你不一定需要在一个条件中有一个函数。

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会引发错误。

在对其应用.attr方法之前，需要将其转换为jquery对象。

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

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

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

4 个答案: