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的每个函数来遍历查询返回的所有元素

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

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

1 个答案: