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的变量。因此，一旦调整大小函数触发，它就不会将$ windwid重置为新的窗口宽度。

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

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

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

1 个答案: