为什么我的函数无法访问外部定义的变量

Question

我试图使用jquery设置我的搜索栏的布局。即尝试通过使用调整大小功能来设置边距和填充作为屏幕大小更改。但不知道为什么只有在函数中定义变量时才起作用。在resize函数中再次定义变量会使代码看起来很难看，我相信有更好的方法来做到这一点。我在哪里定义我的变量出错？

 <script> 

     $(document).ready(function(){ 
      var inputList = $("#keysrch").width(), 
       $windwid = $(window).width(), 
       $srhwrap = $("#srh-wrap").width(), 
       $ulwidth = $("#keysrch").width()+$("#dropdwnopt").width()+$("#srh").width(), 
       $paddingL = Math.round($srhwrap-$ulwidth)/4, 
       $windwid_left_margin = ($windwid-$srhwrap)/2; 

       $("#srhbarinput").css({"width":inputList}); 
       $("#srhbar_unlist").css({"padding-left":$paddingL}); 
       $("#srh-wrap").css({"margin-left":$windwid_left_margin}); 

       $(window).resize(function(){ 

       var inputListchange = $("#keysrch").width(), 
        kysrhwidth = inputListchange; 

       $("#srhbarinput").css({"width":kysrhwidth}); 
       $("#srhbar_unlist").css({"padding-left":$paddingL}); 
       $("#srh-wrap").css({"margin-left":$windwid_left_margin}); 
       console.log("Padding:"+$windwid_left_margin); 
       });    
     }); 

     </script> 

Answer 1

我相信变量不起作用的原因是这样的。例如，您可以在您的功能之外定义一个$ windwid变量。所以一旦你的resize函数触发它不会将$ windwid重置为新的窗口宽度。

您可能需要$ windwid = $（window）.width（）来设置您的初始页面，但是一旦发生调整大小，您需要重新读取$（window）.width（）到您的resize函数中。

就目前而言，您只能读取一次窗口宽度，而不是在调整大小功能中更新窗口宽度。你可以在你的函数之外定义你的变量，但是在调整大小之后，你需要在你的调整大小函数中刷新它。