Question

我试图让脚本只在视口低于1025时运行。然后在调整大小时，如果屏幕大小增加，则忽略或运行脚本。目前它可以运行任何屏幕大小。

$(document).ready(function() {
    $(window).resize(function() {
     if ($(window).width() < 1025) {

         var $caseStudies = $('.case-study');
         $('.pagination div').on('click', function() {
            $caseStudies.css("position", "absolute"); 
            $caseStudies.eq($(this).index()).css("position", "relative"); 
         });

     }
    else {
        // ELEMENT IS ABSOLUTE
    }
   });
});

Answer 1

当窗口不再是< 1025时，代码中没有任何内容可以删除您在< 1025情况下设置的处理程序。您必须显式删除处理程序。可能最简单的方法是使用事件类。您还需要一个标记来指示处理程序是否已附加。请参阅***评论：

$(document).ready(function() {
    var hasHandler = false;
    $(window).resize(function() {
        if ($(window).width() < 1025) {
            // *** Add handler if we don't already have it
            if (!hasHandler) {
                hasHandler = true;
                var $caseStudies = $('.case-study');
                $('.pagination div').on('click.positioner', function() {
                    // *** Note ------------------^^^^^^^^^^^
                    $caseStudies.css("position", "absolute");
                    $caseStudies.eq($(this).index()).css("position", "relative");
                });
            }
        }
        else {
            // If we ever added a handler...
            if (hasHandler) {
                hasHandler = false;
                // *** Remove it
                $('.pagination div').off('click.positioner');
                // *** Make them all relative again
                $('.case-study').css("position", "relative");
            }
        }
    });
});

你在评论中说过：

...在调整浏览器大小后，此脚本似乎才有效。如果浏览器小于1025，我需要它才能工作但是如果调整大小则检测调整大小

然后你只需将代码放在一个函数中，并从ready（在页面加载时）和调用该函数以响应调整大小：

$(document).ready(function() {
    var hasHandler = false;
    function handlePositioning() {
        if ($(window).width() < 1025) {
            // *** Add handler if we don't already have it
            if (!hasHandler) {
                hasHandler = true;
                var $caseStudies = $('.case-study');
                $('.pagination div').on('click.positioner', function() {
                    // *** Note ------------------^^^^^^^^^^^
                    $caseStudies.css("position", "absolute");
                    $caseStudies.eq($(this).index()).css("position", "relative");
                });
            }
        }
        else {
            // If we ever added a handler...
            if (hasHandler) {
                hasHandler = false;
                // *** Remove it
                $('.pagination div').off('click.positioner');
                // *** Make them all relative again
                $('.case-study').css("position", "relative");
            }
        }
    }
    handlePositioning();
    $(window).resize(handlePositioning);
});

（或者您可以在上面第一个代码块中的.trigger("resize")调用结束时添加.on，以便在添加后触发事件，但这对我来说似乎总是很糟糕......）< / p>

为什么这个JQuery调整大小不起作用？

1 个答案: