使用javascript更改移动版本的图像源文件夹

Change image source folder for mobile version with javascript

本文关键字：图像 源文件 文件夹 版本 移动 javascript 使用      更新时间：2023-09-26

对不起，我是JS的新手，我在stackoverflow上发现了一些JS。我的情况是，我有一个div与两个图像在里面，我想改变这些图像的源路径，当窗口小于480px。我的代码是:

<div id="bigFoto">
<img src="img/photo1.jpg" alt="text for alt" id="photo1">
<img src="img/photo2.jpg" alt="text for alt" id="photo2">
</div>

和当前运行的脚本是:

$(window).resize(function(){
    var width = $(window).width(); 
    if (width < 481) {
      $("#bigFoto img#photo1").attr("src","img/mobile/photo1.jpg");
      $("#bigFoto img#photo2").attr("src","img/mobile/photo2.jpg");
    }
    else{
      $("#bigFoto img#photo1").attr("src","img/photo1.jpg");
      $("#bigFoto img#photo2").attr("src","img/photo2.jpg");
    }
});

这个脚本是正常工作的，但现在假设我想要那个div有20张图片，我猜我必须在这个脚本中添加它们中的每一张?

真正的问题:是否有一种方法可以针对所有图像，而只是在源路径上添加/mobile部分?，因为文件名保持不变。

非常感谢你的帮助!

您可以使用jQuery的each函数遍历查询返回的所有元素

$(window).resize(function(){
    var width = $(window).width(); 
    if (width < 481) {
      $("#bigFoto img").each(function(index){
        var src = $(this).attr("src")
        var photoName = src.substr(src.lastIndexOf("/"));
        $(this).attr("src", "img/mobile/"+photoName)
      })
    }
    else{
      $("#bigFoto img").each(function(index){
        var src = $(this).attr("src")
        var photoName = src.substr(src.lastIndexOf("/"));
        $(this).attr("src", "img/"+photoName)
      })
    }
});
相关文章：