调整浏览器大小时实时更改

Question

我已经根据屏幕尺寸使用此代码在6和4项之后依次添加div。 它在加载时工作正常，但在浏览器调整大小时不起作用。

$(document).ready(function () {
    $screensize = $(window).width();
    if ($screensize > 1024) {
        $('#menu .nav > li.categories_hor > div > .column:nth-child(6n)').after('<div class="clearfix visible-lg-block"></div>');
    }
});

$(function () {
    $screensize = $(window).width();
    if ($screensize < 1025) {
        $('#menu .nav > li.categories_hor > div > .column:nth-child(4n)').after('<div class="clearfix visible-lg-block visible-md-block"></div>');
    }
})
})

---

更新：

感谢所有答案。 但是，根据我的要求，它并不能完美地工作。因此，我更改了超过1倍的屏幕大小，因此，每次调用（添加超过1格）。

它看起来像这样：

如果设备宽度大于1024。那么，Counter将计算6（在6项之后添加clearfix div）。 ＆如果设备宽度小于1024So。 计数器将计算4（在4项之后添加clearfix div）。

如果设备宽度> 1024

  <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="clearfix"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="clearfix"></div> <div class="item"></div> <div class="item"></div> 

如果设备宽度小于1024

  <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="clearfix"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="clearfix"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="clearfix"></div> <div class="item"></div> <div class="item"></div> 

希望您能清楚地理解我的问题。 谢谢。

Answer 1

要检查用户何时调整浏览器的大小，请使用$ .resize ，如下所示：

$( window ).resize(function() {
    $screensize = $(window).width();
    if ($screensize > 1024) {
        $(".clearfix.visible-lg-block").remove();
        $('#menu .nav > li.categories_hor > div > .column:nth-child(6n)').after('<div class="clearfix visible-lg-block"></div>');
    } 
    if ($screensize < 1024) {
        $(".clearfix.visible-lg-block").remove();
        $('#menu .nav > li.categories_hor > div > .column:nth-child(4n)').after('<div class="clearfix visible-lg-block visible-md-block"></div>');
    } 
});

注意：如果width == 1024 ，请考虑会发生什么。

Answer 2

尝试使用resize事件，并在处理程序中使用条件语句来操作DOM：

$(window).resize(function () {
    if ($(this).width() > 1024) {
        $('#menu .nav > li.categories_hor > div > .column:nth-child(6n)').after('<div class="clearfix visible-lg-block"></div>');
    } else {
        $('#menu .nav > li.categories_hor > div > .column:nth-child(4n)').after('<div class="clearfix visible-lg-block visible-md-block"></div>');
    }
});

要手动触发此onload，请执行以下操作：

$(function() { $(window).resize() }); // trigger resize onload

请注意，您可能想更改DOM操作逻辑，以改用CSS切换类和可见性，因为现在您将在调整大小时添加多个元素。