JavaScript变量page在窗口resize时值异常的问题排查

我看到你遇到了窗口 resize 时 page 变量值无法保持当前正确状态的问题，咱们一步步拆解问题并解决它：

1. 核心问题排查 #

（1）变量作用域不匹配 #

你在 $(document).ready() 内部用 var page 声明了变量，这意味着它是局部作用域变量，只能在 ready 函数内部访问。而你原本的 resize 事件处理函数是写在 ready 外部的，它无法拿到这个局部的 page 值，此时 resize 里的 page 会被当作全局变量处理，自然和你在点击事件里修改的不是同一个变量。

（2）条件判断的语法错误 #

在 resize 逻辑里，你写了 if (page = "personal-ionformation") —— 这里用的是赋值运算符 = 而非相等判断运算符 ==（或更严谨的 ===），这会直接把字符串赋值给 page，导致条件永远为真，看起来就像 page 一直是这个值。

（3）拼写错误 #

你在多处把 personal-information 写成了 personal-ionformation（多了一个字母 i），这会导致点击事件设置的状态和 resize 里的判断字符串不匹配，逻辑自然失效。

修正后的完整代码 #

我把所有问题都修复了，同时调整了代码结构确保作用域正确：

$(document).ready(function (event) { 
    alert(); 
    // 把page变量放在ready函数顶层，确保内部所有事件都能访问
    var page = "blank"; 

    $(".billing-information").css("display", "none"); 
    $(".services-information").css("display", "none"); 

    $("#next").click(function () { 
        page = "services"; 
        console.log(page); 
        $(".personal-information").css("display", "none"); 
        $(".services-information").css("display", "block"); 
        nextFromPersonalInformationCss(); 
    }); 

    $(".back-from-billing").click(function () { 
        page = "services"; 
        console.log(page); 
        $(".services-information").css("display", "block"); 
        $(".billing-information").css("display", "none"); 
        backFromBillingCss(); 
    }); 

    $(".back-from-service").click(function () { 
        // 修正拼写错误
        page = "personal-information"; 
        console.log(page); 
        $(".personal-information").css("display", "block"); 
        $(".services-information").css("display", "none"); 
        backFromServicesCss(); 
    }); 

    $(".next-from-service").click(function () { 
        page = "billing"; 
        console.log(page); 
        $(".services-information").css("display", "none"); 
        $(".billing-information").css("display", "block"); 
        nextFromServicesCss(); 
    }); 

    // 把resize事件放到ready内部，确保能访问局部的page变量
    $(window).resize(function () { 
        var width = $(window).width(); 
        if (width <= 767) { 
            console.log(page); 
            // 修正判断运算符+拼写错误
            if (page === "personal-information") { 
                $(".personal-detail").css("display", "block"); 
                $(".services").css("display", "none"); 
                $(".billing").css("display", "none"); 
            } else if (page === "services") {
                // 补充services状态的显示逻辑
                $(".personal-detail").css("display", "none"); 
                $(".services").css("display", "block"); 
                $(".billing").css("display", "none"); 
            } else if (page === "billing") {
                // 补充billing状态的显示逻辑
                $(".personal-detail").css("display", "none"); 
                $(".services").css("display", "none"); 
                $(".billing").css("display", "block"); 
            }
        }
    });
});

额外优化建议 #

• 尽量使用 === 进行严格相等判断，避免类型转换带来的意外问题；
• 可以把页面状态的显示隐藏逻辑封装成单独函数（比如 updatePageDisplay(page)），减少重复代码，提升可维护性；
• 给 resize 事件添加防抖处理，避免窗口拖动时频繁触发事件影响性能：

  var resizeTimeout;
  $(window).resize(function () {
      clearTimeout(resizeTimeout);
      resizeTimeout = setTimeout(function() {
          // 你的resize处理逻辑
      }, 200);
  });
  

内容的提问来源于stack exchange，提问作者user8718405