javascript - 使用 jquery 更改部分 src 名称，在调整窗口大小时不断重复

Question

我编写了代码来查找特定 div 内所有图像的 src，并在窗口小于 900 宽时更改 src 名称。它在页面刷新时工作正常，但是当我调整窗口大小时它不断运行代码并且我得到这个错误

GET file://macintosh%20hd/Users/jessicamele/Desktop/tom%20mendicino/images/boys3_small_small_small_small.jpg net::ERR_FILE_NOT_FOUND

它只是一遍又一遍地添加“_small”。这是我的代码:

<div class="threePicsBoys group">
   <img src="images/boys3.jpg" alt="street signs" class="boysPics1">
   <img src="images/boys2.jpg" alt="city house" class="boysPics2">
   <img src="images/boys1.jpg" alt="2 boys" class="boysPics1">
   <img src="images/boys4.jpg" alt="philly signs" class="boysPics2">
   <img src="images/boys5.jpg" alt="religious statue" class="boysPics1">
</div>

$(function() {
    if (windowWidth <= 900) {
        var img = $(".threePicsBoys.group").find("img").map(function() { 
            var src = $(this).attr("src");
            var newName = src.replace(".jpg","_small.jpg"); 
            $(this).attr("src",newName);
        });
    }
});
}

我真的需要一些帮助。

Answer 1

此脚本将检查窗口是否太细以至于必须更改 src，但也会在宽度超过 900 时恢复更改。 我稍微改变了机制以使其工作。例如，windowWidth 不是一个已声明的变量，其余的似乎也没有做那么多。

var thinWindow = false;
$(window).on('load resize', function(){
    if($(window).width() <= 900){
        if(!thinWindow){
            $('.threePicsBoys.group img').each(function(){
                var src = $(this).attr("src");
                var newSrc = src.replace(".jpg","_small.jpg");
                $(this).attr("src", newSrc);
            })
            thinWindow = true
        }
    }else{
        if(thinWindow){
            $('.threePicsBoys.group img').each(function(){
                var src = $(this).attr("src");
                var newSrc = src.replace("_small.jpg",".jpg");
                $(this).attr("src", newSrc);
            })
            thinWindow = false
        }
    }
})

希望对你有帮助