Question

我首先应该说我的jQuery技能几乎没有。我可以阅读大部分内容，但我已经使用stackoverflow搜索我的大多数问题的答案。不幸的是，经过一天半的反复试验后，我无法想出这一点。

我正在修改Wordpress主题以获得一些响应。此主题使用两个脚本（columnize.js和columnizer.js）来显示三列中的帖子。

我的目标之一是根据窗口的大小使主题在1,2或3列之间交换。

我能够在document.ready上执行此操作，但出于某种原因，我无法在我的两个条件下触发window.resize上的更改（我可以通过宽度大小更改触发它，但它会做它不间断，计时器不是我想要的。）

我已经对columnize.js进行了这些更改，这些更改是在。之前调用的。

这是我最近的尝试：

    //jQuery.noConflict();
var smallWindow;
var windowsize = jQuery(window).width(); //need to use jQuery instead of $

jQuery(document).ready(function($){
    if (windowsize < 868) { //if page opens on a small window
        jQuery('.mcol').makeacolumnlists({cols: 2, colWidth: 305, equalHeight: 'ul', startN: 1}); //creates the columns
        jQuery('.mcol2').makeacolumnlists({cols: 3, colWidth: 293, equalHeight: 'ul', startN: 1});
        smallWindow = true; //for the next if condition on resize
        alert(smallWindow); //just to check if it works
    }
    else { //if page opens on a big window
        jQuery('.mcol').makeacolumnlists({cols: 3, colWidth: 305, equalHeight: 'ul', startN: 1});
        jQuery('.mcol2').makeacolumnlists({cols: 3, colWidth: 293, equalHeight: 'ul', startN: 1});
        smallWindow = false;
        alert(smallWindow);
    }
});

jQuery(window).resize(function() {
    if ((windowsize < 868) && (smallWindow == false)){
//nothing works here, these conditions were here to keep the function from
//triggering when not necessary, i.e. would only trigger below a certain
//width if window above that width
        jQuery('.mcol').uncolumnlists(); //removes old columns
        jQuery('.mcol').makeacolumnlists({cols: 2, colWidth: 305, equalHeight: 'ul', startN: 1}); //creates new columns
        smallWindow = true; //changes to stop the function from triggering on further resize down
        alert(smallWindow);
    }
    else if ((windowsize > 867) && (smallWindow == true)){
        jQuery('.mcol').uncolumnlists();
        jQuery('.mcol').makeacolumnlists({cols: 3, colWidth: 305, equalHeight: 'ul', startN: 1});
        smallWindow = false; //changes to stop the function from triggering on further resize up
        alert(smallWindow);
    }
    else !false;
});

我不知道自己做错了什么。任何帮助将不胜感激。

编辑1

感谢您的帮助。对adeneo的代码进行了一些小修改，使其不会触发不停的功能：

jQuery(document).ready(function ($) {
var smallWindow = false;
$(window).on('resize', function () {
    var windowsize = $(window).width();

    if (windowsize < 868 && smallWindow == false) { // did the ! meant false?
        $('.mcol').uncolumnlists();
        $('.mcol').makeacolumnlists({ cols: 2, colWidth: 305, equalHeight: 'ul', startN: 1 });
        smallWindow = true;
        //alert(smallWindow);
    } else if (windowsize >= 868 && smallWindow == true) { //now won't trigger unless smallWindow is true
        $('.mcol').uncolumnlists();
        $('.mcol').makeacolumnlists({ cols: 3, colWidth: 305, equalHeight: 'ul', startN: 1 });
        smallWindow = false;
        //alert(smallWindow);
    }
}).trigger('resize');
});

只剩下一件事，因为从一开始就定义了smallWindow，如果页面在窗口中加载＆gt; = 868，则该函数不会触发。我要抓住这个问题，但我会在这里分享我的问题因为你比我快。：）

编辑2

好的，我明白了。当它应该为true时我必须使smallWindow变量为false，反之亦然，所以我可以强制resize函数在加载时触发。尽管如此，我觉得很愚蠢，因为我尝试了多种方法，但我仍然无法声明一个全局变量...所以我正在重复使用windowsize var ......

jQuery(document).ready(function ($) {
var windowsize = $(window).width();
if (windowsize <868) {
    var smallWindow = false;
}
else {
    var smallWindow = true;
};

$(window).on('resize', function () {
    var windowsize = $(window).width();

    if (windowsize < 868 && !smallWindow) {
        $('.mcol').uncolumnlists();
        $('.mcol').makeacolumnlists({ cols: 2, colWidth: 305, equalHeight: 'ul', startN: 1 });
        smallWindow = true;
    } else if (windowsize >= 868 && smallWindow) {
        $('.mcol').uncolumnlists();
        $('.mcol').makeacolumnlists({ cols: 3, colWidth: 305, equalHeight: 'ul', startN: 1 });
        smallWindow = false;
    }
}).trigger('resize');
});

感谢您的帮助！

Answer 1

您应该将调整大小函数放在ready处理程序中，并且您还需要在调整大小时更新windowSize变量，否则它将始终相同。并且无需两次输入相同的内容，只需在pageload上触发resize事件：

jQuery(document).ready(function ($) {
    var smallWindow = false;
    $(window).on('resize', function () {
        var windowsize = $(window).width();

        if (windowsize < 868 && !smallWindow) {
            $('.mcol').uncolumnlists();
            $('.mcol').makeacolumnlists({ cols: 2, colWidth: 305, equalHeight: 'ul', startN: 1 });
            smallWindow = true;
        } else if (windowsize > 868 && smallWindow) {
            $('.mcol').uncolumnlists();
            $('.mcol').makeacolumnlists({ cols: 3, colWidth: 305, equalHeight: 'ul', startN: 1 });
            smallWindow = false;
        }
    }).trigger('resize');
});

Answer 2

smallWindow必须先设置为某个（真或假）

jQuery：无法在两种情况下触发函数

编辑1

编辑2

2 个答案: