まず、私の jQuery スキルは誰にも負けません。私はほとんどのものを読むことができますが、私の問題のほとんどに対する答えをstackoverflowで検索することに頼っています. 残念ながら、1日半の試行錯誤の後、これを理解することはできません.
応答性を高めるために、Wordpress のテーマを変更しています。このテーマは、2 つのスクリプト (columnize.js と columnizer.js) を使用して、投稿を 3 列で表示します。
私の目標の 1 つは、ウィンドウのサイズに応じて、1、2、または 3 列の間でテーマを交換することでした。
私は document.ready でそれを行うことができますが、何らかの理由で、私の 2 つの条件の下で 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 変数を true にする必要があるときに false にする必要があり、その逆も同様でした。そのため、サイズ変更関数をロード時に強制的にトリガーすることができました。それでも、私は複数の方法を試しましたが、まだグローバル変数を宣言できないので、私は愚かだと感じています...
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');
});
助けてくれてありがとう！