Question

我编写代码来查找特定div中所有图像的src，并在窗口小于900宽时更改src名称。它在页面刷新时工作正常，但是当我调整窗口大小时，它会持续运行代码，我会收到此错误

GET 文件：//macintosh%20hd/Users/jessicamele/Desktop/tom%20mendicino/images/boys3_small_small_small_small.jpg 净:: 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

当窗口小于900宽度时，此代码将永远循环。如果您希望仅在窗口更改宽度上运行，则必须添加正确的事件绑定

$(window).resize(function() {
    if (windowWidth <= 900)
    {
        var img = $(".threePicsBoys.group").find("img")
        var src = img.attr("src");
        if (!(src.indexOf("_small.jpg") > -1))
        {
            var newName = src.replace(".jpg","_small.jpg");
            img.attr("src",newName); 
        }
    }
});

Answer 2

此脚本将检查窗口是否太薄以至于必须更改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
        }
    }
})

希望这有帮助

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

2 个答案: