Question

我有一小段jQuery：

if (jQuery(window).innerWidth() > 568) {
    jQuery('#boardOfTrustees').masonry({
        itemSelector: '.postWrapper',
    });
}

这样可以正常工作，但是如果屏幕小于一定大小，我想阻止它工作，或者在调整大小时取消初始化。我试过这个：

jQuery(window).smartresize(function() {
    if (jQuery(window).innerWidth() > 568) {
        jQuery('#boardOfTrustees').masonry({
            itemSelector: '.postWrapper',
        });
    }   
});

.smartresize是一个去抖动脚本，它运行良好，但对于这个特殊情况，它没有做任何事情，并且砌体脚本仍然被初始化。如果屏幕小于568像素，如何让第一组jQuery停止应用于元素，但如果调整大小大于568则再次开始工作？

Answer 1

这适用于加载。没有调整大小：

if (jQuery(window).innerWidth() < 568) {
    jQuery('#boardOfTrustees').masonry({
        itemSelector: '.postWrapper',
    });
}

要使其适用于调整大小，您需要使用方法destroy作为详细at the documentation.

$(window).resize(function () {
    if (jQuery(window).innerWidth() < 568) {
        jQuery('#boardOfTrustees').masonry('destroy');
    } else {
        jQuery('#boardOfTrustees').masonry({
            itemSelector: '.postWrapper',
        });
    }
});

Answer 2

摧毁它

else {
    jQuery('#boardOfTrustees').masonry('destroy')
}

如果屏幕尺寸小于，则停止脚本工作

2 个答案: