Question

我有一段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")     
 }
 }
 });
 });

Answer 1

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

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的情况下进行调整。

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

1 个答案: