如何避免为此jQuery代码编写两次条件语句？

我有一段jQuery代码，首先检查设备大小加载时，并为每个后续窗口调整大小，它会把正确的图像。我发现自己不得不两次写条件语句。有没有更好的方法来实现这一目标？谢谢。如何避免为此jQuery代码编写两次条件语句？

$(window).ready(function() { 
var wi=$(window).width(); 
//upon loading for first time, show correct image size 
if (wi <=420) 
{ 
$("#main").find("img").attr("src","images/main_image_xs.jpg") 
} 
else 
{ 
    $("#main").find("img").attr("src","images/main_image_default.jpg")  
} 
} 

$(window).resize(function() { 
// When resizing windows, show corect image size 
if (wi <=420) 
{ 
$("#main").find("img").attr("src","images/main_image_xs.jpg") 
} 
else 
{ 
    $("#main").find("img").attr("src","images/main_image_default.jpg")  
} 
} 
}); 
});

来源

2015-06-29 schenker

您可以将它推入一个常用函数并调用该方法。顺便说一句，准备好的窗户是一个奇怪的事件，从来没有见过它在使用。使用窗口'load（）'。你还没有在'resize（）'上计算新的窗口大小' –

@Shaunak：除非你知道你需要'load'，否则你通常需要'ready'。一旦所有页面的HTML已经加载并且DOM完成，'ready'就会被触发。 'load'等待所有的图像，样式表等已经加载，这可能会更长。 – icktoofay

我知道。但我从来没有见过一个ready（）事件附加到窗口。它通常与'document'有关。似乎没有DOM和窗口的连接。 –

使用命名函数，而不是匿名函数。

function adjustImageSize() { 
    var imageURL; 
    if($(window).width() <= 420) { 
     imageURL = "images/main_image_xs.jpg"; 
    }else{ 
     imageURL = "images/main_image_default.jpg"; 
    } 
    $("#main img").attr("src", imageURL); 
} 

$(window).ready(adjustImageSize).resize(adjustImageSize);

更好的是，看看你是否可以使用媒体查询 - 那么你的网站可以适应，而不需要JavaScript。

来源

2015-06-29 02:44:11 icktoofay

如何避免为此jQuery代码编写两次条件语句？

回答

相关问题