我应该首先说我的 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 是从一开始就定义的，如果页面加载在一个 >=868 的窗口中，则该函数不会触发。我不得不对此挠头，但我会在这里分享我的问题，因为你比我快。:)
编辑 2
好的，我明白了。当 smallWindow 变量应该为真时，我必须将其设置为假，反之亦然，因此我可以强制调整大小函数在加载时触发。尽管如此，我还是觉得很愚蠢，因为我尝试了多种方法，但我仍然无法声明全局变量......所以我用 windowssize 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');
});
谢谢您的帮助！