交换具有相同类名的多个文件路径

我试图根据屏幕宽度更改图像的文件路径。我已经得到它的工作，因为文件路径确实发生了变化，但它只影响第一个元素，因为它将所有文件路径更改为同一个文件路径。交换具有相同类名的多个文件路径

当我在浏览器中查看我的代码时，图像1和图像2被替换为src="Images/image.jpg"。有人可以帮助我确定我需要做什么/更改，以便它唯一影响类名为“swap-image”的每个元素？

如，改变

src="Images/image.jpg" 
src="Images/image1.jpg"

到

src="Images/tablet/image.jpg" 
src="Images/tablet/image1.jpg"

预先感谢您。

<body> 
    <img class="swap-image" src="Images/image.jpg" /> 
    <img class="swap-image" src="Images/image1.jpg" /> 

    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script> 
     $(document).ready(function() { 

      var swapImageClass = document.getElementsByClassName("swap-image"); 
      var i; 
      for (i = 0; i < swapImageClass.length; i++) { 

       var src = $(swapImageClass).attr('src'); // "Images/image.jpg" 
       var tarr = src.split('/');  // ["static","Images","banner","image.jpg"] 
       var file = tarr[tarr.length - 1]; // "image.jpg" 
       var data = file.split('.')[0]; // "image" 

       $(window).on('load resize', function() { 
        $(swapImageClass).each(function() { 
         if ($(window).width() > 1025) { 
          $(swapImageClass).attr('src', 'Images/' + file); 
         } 
         else if ($(window).width() > 481 && $(window).width() < 1024) { 
          $(swapImageClass).attr('src', 'Images/tablet/' + file); 
         } 
         else if ($(window).width() > 0 && $(window).width() < 480) { 
          $(swapImageClass).attr('src', 'Images/mobile/' + file); 
         } 
        }); 
       }); 
      }; 

     }); 
    </script> 
</body>

来源

2016-07-29 LNifred

我们将文件名以循环中的当前元素为基础，并将一个eventlistener绑定到它。

$(document).ready(function() { 
    var swapImageClass = $('.swap-image'); 

    swapImageClass.each(function(index) { 
     var filename = $(this).attr('src').split('/').pop(), 
      img = $(this); 

     $(window).on('load resize', function() { 
      var w = $(window).width(); 

      if (w > 1025) { 
       img.attr('src', 'Images/' + filename); 
      } else if (w > 481 && w < 1024) { 
       img.attr('src', 'Images/tablet/' + filename); 
      } else if (w > 0 && w < 480) { 
       img.attr('src', 'Images/mobile/' + filename); 
      } 
     }); 
    }); 
});

来源

2016-07-29 09:40:47

当你使用jQuery我想你可以简单地使用类名和each()循环。

$(window).on('load resize', function() { 
       $(".swap-image").each(function() { 
        var src = $(this).attr('src'); // "Images/image.jpg" 
         var tarr = src.split('/');  // ["static","Images","banner","image.jpg"] 
         var file = tarr[tarr.length - 1]; // "image.jpg" 
        if ($(window).width() > 1025) { 
         $(this).attr('src', 'Images/' + file); 
        } 
        else if ($(window).width() > 481 && $(window).width() < 1024) { 
         $(this).attr('src', 'Images/tablet/' + file); 
        } 
        else if ($(window).width() > 0 && $(window).width() < 480) { 
         $(this).attr('src', 'Images/mobile/' + file); 
        } 
       }); 
      });

检查该功能在这里https://jsfiddle.net/7619099p/

来源

2016-07-29 09:44:28

只需修改这里的代码，是这样的预期？

$(document).ready(function(e) { 
     //Here we are saving the file name as a data attribute to each images 
     $(".swap-image").each(function(index, element) { 
      var tarr = $(element).attr("src").split('/'); 
      var file = tarr[tarr.length - 1]; 
      $(element).data("filename",file);    
     }); 

     $(window).on('load resize', function() { 
      $(".swap-image").each(function() { 
      // and here we are using the saved data attribute(filename) for new path [$(this).data("filename")] on resize.This will give you individual new paths based on screen resolution. 
        if ($(window).width() > 1025) { 
         $(swapImageClass).attr('src', 'Images/' + $(this).data("filename")); 
        } 
        else if ($(window).width() > 481 && $(window).width() < 1024) { 
         $(swapImageClass).attr('src', 'Images/tablet/' + $(this).data("filename")); 
        } 
        else if ($(window).width() > 0 && $(window).width() < 480) { 
         $(swapImageClass).attr('src', 'Images/mobile/' + $(this).data("filename")); 
        } 
       }); 
      }); 

    });

来源

2016-07-29 09:49:50 FvZ

交换具有相同类名的多个文件路径

回答

相关问题