运行窗口大小调整代码

Run code on window resize

本文关键字：代码调整窗口大小运行更新时间：2023-09-26

我试着在窗口调整大小时运行这段代码，这是我的代码:

    $(document).ready(function () {
            updateContainer();
            $(window).resize(function() {
                updateContainer();
            });
            $('#slider').lightSlider({
                item:1,
                slideMove:1,
                slideMargin: 30,
                loop: true,
                autoWidth: slideWidth
            });
        });
        function updateContainer() {
            var $winWidth = $(window).width();
            if ($winWidth > 1100) {
                var slideWidth = false;
                /* Toggle navigation
                ======================================================================== */
                $('.menu, .search, .categories').click(function(e) {
                    $(this).toggleClass('active');
                    e.preventDefault();
                });

                /* Back To Top
                ======================================================================== */
                $('#back-top').click(function(e) {
                    e.preventDefault();
                    $('html, body').animate({
                        scrollTop: 0
                    }, 500);
                });
            }
            if ($winWidth > 700) {
                var slideWidth = true;
            }
        }

控制台出现一个错误:var slideWidth未定义。

我做错了什么?我已经尝试了几种方法来写这个，但没有一个工作…

在document准备期间，您没有在这里定义它:

$('#slider').lightSlider({
    item:1,
    slideMove:1,
    slideMargin: 30,
    loop: true,
    autoWidth: slideWidth
});

在上述阶段，它没有定义。使它在更高的作用域中可访问:

$(document).ready(function () {
  var slideWidth = false;
  updateContainer();
  $(window).resize(function() {
    updateContainer();
  });
  $('#slider').lightSlider({
    item:1,
    slideMove:1,
    slideMargin: 30,
    loop: true,
    autoWidth: slideWidth
  });
});

使用var slideWidth = false;使其进入全局作用域。当你执行updateContainer()时，它会更新全局变量。

并确保，在您的updateContainer()中，您是而不是使用var:

function updateContainer() {
    var $winWidth = $(window).width();
    if ($winWidth > 1100) {
        slideWidth = false;
    // Other code
}

您的slideWidth变量定义在不可访问的范围内，在ready处理程序之后定义并初始化它为false:

$(document).ready(function () {
    var slideWidth = false;

，然后删除var:

if ($winWidth > 700) {
   slideWidth = true;
}