使用javascript更改移动版本的图像源文件夹
抱歉,我是JS的新手,我在stackoverflow上找到的一些JS遇到了问题。我的情况是,我有一个div,里面有两个图像,当窗口小于480px时,我想更改这些图像的源路径。我的代码是:使用javascript更改移动版本的图像源文件夹,javascript,Javascript,抱歉,我是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 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");
}
});
$(窗口)。调整大小(函数(){
变量宽度=$(窗口).width();
如果(宽度<481){
$(“#bigFoto img#photo1”).attr(“src”、“img/mobile/photo1.jpg”);
$(“#bigFoto img#photo2”).attr(“src”、“img/mobile/photo2.jpg”);
}
否则{
$(“#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)
})
}
});
$(窗口)。调整大小(函数(){
变量宽度=$(窗口).width();
如果(宽度<481){
$(“#bigFoto img”)。每个(函数(索引){
var src=$(this.attr(“src”)
var photoName=src.substr(src.lastIndexOf(“/”);
$(this.attr(“src”,“img/mobile/”+photoName)
})
}
否则{
$(“#bigFoto img”)。每个(函数(索引){
var src=$(this.attr(“src”)
var photoName=src.substr(src.lastIndexOf(“/”);
$(this.attr(“src”,“img/”+photoName)
})
}
});
是!这就像一个魅力!!!非常感谢你!因此,每个函数都会遍历所有图像,对吗?对于与选择器匹配的每个元素,传递给每个函数的匿名函数都会被调用一次$(这)提供对所选图元的引用。