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

Question

抱歉，我是 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 部分？ ，因为文件名保持不变。

非常感谢您的帮助!

Answer 1

您可以使用 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)
      })
    }
});