Javascript 使用Jquery替换基于屏幕大小的图像

我正在尝试根据屏幕大小更改图像src

$（文档）.ready（函数（）{
$（函数（）{
如果（$（窗口）.width（）<568）{
$（“#crewimage”）。每个（函数（）{
$（this.attr（“src”），$（this.attr（“src”）.replace（“resources/images/thecrew.png”，“resources/images/thecrewmobile.png”）；
});
}else if（$（窗口）.width（）>=568）{
$（“#crewimage”）。每个（函数（）{
$（this.attr（“src”），$（this.attr（“src”）.replace（“resources/images/thecrewmobile.png”，“resources/images/thecrew.png”）；
});
}
});
});

不要使用替换：

 <img class="crewimage" src="resources/images/thecrew.png" alt="Header Image"></img>

            $(function() {
            if($(window).width() < 568) {
                $(".crewimage").each(function() {
                $(this).attr("src","resources/images/thecrewmobile.png");
                });
            } else if ($(window).width() >= 568) {
                $(".crewimage").each(function() {
                $(this).attr("src","resources/images/thecrew.png");
                });
                }
            });


$（函数（）{
如果（$（窗口）.width（）<568）{
$（“.crewimage”）。每个（函数（）{
$（this.attr（“src”，“resources/images/thecrewmobile.png”）；
});
}else if（$（窗口）.width（）>=568）{
$（“.crewimage”）。每个（函数（）{
$（this.attr（“src”，“resources/images/thecrew.png”）；
});
}
});

注意：只有在窗口调整大小后刷新页面时，图像才会更改，如果要在调整大小时自动更改，请使用
调整大小事件

第二，如果您有多个div，则将id更改为class；如果您只有一个div，则删除每个循环
不要使用replace:

 <img class="crewimage" src="resources/images/thecrew.png" alt="Header Image"></img>

            $(function() {
            if($(window).width() < 568) {
                $(".crewimage").each(function() {
                $(this).attr("src","resources/images/thecrewmobile.png");
                });
            } else if ($(window).width() >= 568) {
                $(".crewimage").each(function() {
                $(this).attr("src","resources/images/thecrew.png");
                });
                }
            });


$（函数（）{
如果（$（窗口）.width（）<568）{
$（“.crewimage”）。每个（函数（）{
$（this.attr（“src”，“resources/images/thecrewmobile.png”）；
});
}else if（$（窗口）.width（）>=568）{
$（“.crewimage”）。每个（函数（）{
$（this.attr（“src”，“resources/images/thecrew.png”）；
});
}
});

注意：只有在窗口调整大小后刷新页面时，图像才会更改，如果要在调整大小时自动更改，请使用
调整大小事件

第二，如果您有多个div，如果您只有一个div，请将id更改为classes，删除每个循环
使用窗口调整大小

$(window).resize(function(){

    $(function() {
            if($(window).width() < 568) {
                $(".crewimage").each(function() {
                $(this).attr("src","resources/images/thecrewmobile.png");
                });
                });
            } else if ($(window).width() >= 568) {
                $(".crewimage").each(function() {
            $(this).attr("src","resources/images/thecrew.png");
            });
            });
});

$（窗口）。调整大小（函数（）{
$（函数（）{
如果（$（窗口）.width（）<568）{
$（“.crewimage”）。每个（函数（）{
$（this.attr（“src”，“resources/images/thecrewmobile.png”）；
});
});
}else if（$（窗口）.width（）>=568）{
$（“.crewimage”）。每个（函数（）{
$（this.attr（“src”，“resources/images/thecrew.png”）；
});
});
});
使用窗口大小调整

$(window).resize(function(){

    $(function() {
            if($(window).width() < 568) {
                $(".crewimage").each(function() {
                $(this).attr("src","resources/images/thecrewmobile.png");
                });
                });
            } else if ($(window).width() >= 568) {
                $(".crewimage").each(function() {
            $(this).attr("src","resources/images/thecrew.png");
            });
            });
});

$（窗口）。调整大小（函数（）{
$（函数（）{
如果（$（窗口）.width（）<568）{
$（“.crewimage”）。每个（函数（）{
$（this.attr（“src”，“resources/images/thecrewmobile.png”）；
});
});
}else if（$（窗口）.width（）>=568）{
$（“.crewimage”）。每个（函数（）{
$（this.attr（“src”，“resources/images/thecrew.png”）；
});
});
});
您需要使用jquery的
调整大小
功能

工作小提琴：

HTML

<div id="crew-content">
    <img id="crewimage" src="http://completewebgraphics.com/wp-content/uploads/2015/11/Mobile-Apps-Development-in-India.jpg" alt="Header Image" />
</div>



jQuery代码

$(window).resize(function(e){
   if($(window).width() < 568) {
   console.log($(window).width());
    $("#crewimage").each(function() {
      $(this).attr("src", "http://s3.amazonaws.com/libapps/customers/1633/images/icon_52143.png");
                });
            } else if ($(window).width() >= 568) {
                $("#crewimage").each(function() {
                $(this).attr("src","https://ithemes.com/wp-content/uploads/2012/07/mobile300.png");
                });                        
    }         
});

$（窗口）。调整大小（函数（e）{
如果（$（窗口）.width（）<568）{
log（$（window.width（））；
$（“#crewimage”）。每个（函数（）{
$（this）.attr（“src”http://s3.amazonaws.com/libapps/customers/1633/images/icon_52143.png");
});
}else if（$（窗口）.width（）>=568）{
$（“#crewimage”）。每个（函数（）{
$（this）.attr（“src”https://ithemes.com/wp-content/uploads/2012/07/mobile300.png");
});                        
}         
});

希望这有帮助
 您需要使用jquery的
resize
功能

工作小提琴：

HTML

<div id="crew-content">
    <img id="crewimage" src="http://completewebgraphics.com/wp-content/uploads/2015/11/Mobile-Apps-Development-in-India.jpg" alt="Header Image" />
</div>



jQuery代码

$(window).resize(function(e){
   if($(window).width() < 568) {
   console.log($(window).width());
    $("#crewimage").each(function() {
      $(this).attr("src", "http://s3.amazonaws.com/libapps/customers/1633/images/icon_52143.png");
                });
            } else if ($(window).width() >= 568) {
                $("#crewimage").each(function() {
                $(this).attr("src","https://ithemes.com/wp-content/uploads/2012/07/mobile300.png");
                });                        
    }         
});

$（窗口）。调整大小（函数（e）{
如果（$（窗口）.width（）<568）{
log（$（window.width（））；
$（“#crewimage”）。每个（函数（）{
$（this）.attr（“src”http://s3.amazonaws.com/libapps/customers/1633/images/icon_52143.png");
});
}else if（$（窗口）.width（）>=568）{
$（“#crewimage”）。每个（函数（）{
$（this）.attr（“src”https://ithemes.com/wp-content/uploads/2012/07/mobile300.png");
});                        
}         
});

希望这有帮助
 如果你有语法错误，为什么要在这里发布？我是说可能是，我显然不知道，否则我不会在这里。控制台中会出现语法错误，你知道控制台在哪里吗？这不是语法错误，我将为你编辑该部分。如果你想为单个图像更改图像src，请避免使用jquery。相反，在使用时使用id属性如果出现语法错误，为什么要在此处发布？我是说可能是，我显然不确定，否则我不会在此处。控制台中将出现语法错误，您知道控制台在哪里吗？这不是语法错误，我将为您编辑该部分。如果您想更改单个图像的图像src，请避免使用jquery。我必须承认，你使用的是id属性，它更干净。但不幸的是，它仍然不能正常工作。你说的正常是什么意思？比如说，根本不工作。并没有取代我的形象。好吧，现在我相信它正在尝试做一些事情，但它改变了src：我必须承认，这更干净。但不幸的是，它仍然不能正常工作。你说的正常是什么意思？比如说，根本不工作。并没有取代我的形象。好吧，现在我相信它正试图做些什么，但它改变了src：你能提供一个有效的理由，把