最初查找页面宽度，并在浏览器调整大小后检查它

Finding the page width initially, and checking it after the browser is resized

本文关键字：调整 浏览器 检查 查找      更新时间：2023-09-26

我有这个代码工作，但它似乎笨拙的我，有一种方法来简化?它的要点是，当页面加载时，我正在检查页面宽度，并基于此显示或隐藏div(基于浏览器是否比480像素更宽或更窄)。然后，如果用户调整浏览器窗口的大小，我再次检查宽度并显示/隐藏适当的div。无论如何，这可以简化与jquery或只是js?

function pageWidth() {
        return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;
    }
    //Show/hide the correct div when the page loads
    if (pageWidth() >= 480) {
        $(".siteSearchDropdown").css("display", "none");
        $(".siteSearchSelect").css("display", "block");
    }
    if (pageWidth() < 480) {
        $(".siteSearchDropdown").css("display", "block");
        $(".siteSearchSelect").css("display", "none");
    }
    // Show/hide the correct dropdown when the browser window is resized
    $(window).resize(function() {
        if (pageWidth() >= 480) {
            $(".siteSearchDropdown").css("display", "none");
            $(".siteSearchSelect").css("display", "block");
        }
        if (pageWidth() < 480) {
            $(".siteSearchDropdown").css("display", "block");
            $(".siteSearchSelect").css("display", "none");
        }
    });

与其编写两次代码，不如在window.resize事件处理程序中编写一次，然后在window元素上触发resize事件:

$(window).resize(function() {
    if (pageWidth() >= 480) {
        $(".siteSearchDropdown").css("display", "none");
        $(".siteSearchSelect").css("display", "block");
    }
    if (pageWidth() < 480) {
        $(".siteSearchDropdown").css("display", "block");
        $(".siteSearchSelect").css("display", "none");
    }
}).trigger('resize');

此外，由于这段代码将运行很多次，当有人调整他们的浏览器大小，你应该通过缓存选择器来优化你的代码:

var $siteSearchDrioopdown = $(".siteSearchDropdown"),
    $siteSearchSelect     = $(".siteSearchSelect");
$(window).resize(function() {
    if (pageWidth() >= 480) {
        $siteSearchDrioopdown.css("display", "none");
        $siteSearchSelect.css("display", "block");
    }
    if (pageWidth() < 480) {
        $siteSearchDrioopdown.css("display", "block");
        $siteSearchSelect.css("display", "none");
    }
}).trigger('resize');

注意:我提到了resize事件处理程序代码是如何运行多次，当浏览器调整大小。要亲自测试这一点，只需将以下代码添加到页面并观察开发人员控制台的运行:

$(window).resize(function (e) {
    console.log(e);
});

再次查看代码后，您可以通过使用if/else语句而不是两次运行pageWidth()函数来进一步优化:

var $siteSearchDrioopdown = $(".siteSearchDropdown"),
    $siteSearchSelect     = $(".siteSearchSelect");
$(window).resize(function() {
    if (pageWidth() >= 480) {
        $siteSearchDrioopdown.css("display", "none");
        $siteSearchSelect.css("display", "block");
    } else {//notice the change in structure so the `pageWidth()` function is only called once
        $siteSearchDrioopdown.css("display", "block");
        $siteSearchSelect.css("display", "none");
    }
}).trigger('resize');

如果你可以瞄准CSS3兼容的浏览器，你应该看看媒体查询。另外，还有一些javascript库，如response，可以为旧版本的浏览器提供相同的功能。

类似于

function pageWidth() {
    return window.innerWidth || document.body.clientWidth;
}
function reconfig() {
    if (pageWidth() >= 480) {
        $(".siteSearchDropdown").hide();
        $(".siteSearchSelect").show();
    } else {
        $(".siteSearchDropdown").show();
        $(".siteSearchSelect").hide();
    }
}
$(window).resize(reconfig);
reconfig();

您不需要功能pageWidth()，只需使用$(window).width()。此外，您不必复制代码来显示/隐藏div，创建一个函数来完成它。

function showHide() {
  var isBigLayout = $(window).width() > 480;
  $(".siteSearchDropdown").css("display", isBigLayout ? "none" : "block");
  $(".siteSearchSelect").css("display", isBigLayout ?  "block" : "none");
}

$(window).resize(showHide); //Run when resized
showHide(); // Run initially, or $(showHide) to run after DOM is loaded
相关文章：