最近、いくつかのサイト要素のパラメーターをウィンドウ サイズに合わせて調整するスクリプトを作成しました。エラーは表示されませんが、何も変わりません。奇妙なことに、スクリプト配列のすべての場所が思い通りに読み取られるので、そうではないと思います。一方、同様のコードを使用しても配列がなくても完全に機能した場合、ボットは醜く見えました。
jQuery.fn.extend({
MscreenAdjust: function (x,a,b,c,d) {
var windowWidth = $(window).width();
if (windowWidth > 1500) {
$(this).css(x, a);
}
else if (windowWidth > 1050) {
$(this).css(x, b)
}
else if (windowWidth > 800) {
$(this).css(x, c)
}
else {
$(this).css(x, d)
}
}
});
$(document).ready(function() {
$(".center").MscreenAdjust("width", 1390, 980, 780, 300);
$("#content").MscreenAdjust("margin-right", "10%", 0, 0, 0);
$("#menu_bar li").MscreenAdjust("width", "auto", "auto", "auto", "100%");
});
$(window).resize(function() {
$(".center").MscreenAdjust("width", 1390, 980, 780, 300);
$("#content").MscreenAdjust("margin-right", "10%", 0, 0, 0);
$("#menu_bar li").MscreenAdjust("width", "auto", "auto", "auto", "100%");
});
したがって、現在のコードは次のとおりです。
jQuery.fn.extend({
MscreenAdjust: function (toAdjust) {
toAdjust.forEach(function (elem) {
var windowWidth = $(window).width();
var ItemtoAdjust = elem;
if (windowWidth > 1500) {
$(ItemtoAdjust[0]).css(ItemtoAdjust[1], ItemtoAdjust[2]);
}
else if (windowWidth > 1050) {
$(ItemtoAdjust[0]).css(ItemtoAdjust[1], ItemtoAdjust[3]);
}
else if (windowWidth > 800) {
$(ItemtoAdjust[0]).css(ItemtoAdjust[1], ItemtoAdjust[4]);
}
else {
$(ItemtoAdjust[0]).css(ItemtoAdjust[1], ItemtoAdjust[5]);
}
});
}
});
var myArray = [
[".center","width", 1390, 980, 780, 300],
["#content","margin-right", "10%", 0, 0, 0],
["#menu_bar li","width", "auto", "auto", "auto", "100%"]
];
$(document).ready().MscreenAdjust(myArray);
$(window).resize().MscreenAdjust(myArray);
編集:
関数をjQuery固有のものから通常のものに変更したところ、すべての問題がなくなりました。コードは次のとおりです。
function MscreenAdjust(toAdjust) {
toAdjust.forEach(function (elem) {
var windowWidth = $(window).width();
var ItemtoAdjust = elem;
if (windowWidth > 1500) {
$(ItemtoAdjust[0]).css(ItemtoAdjust[1], ItemtoAdjust[2]);
}
else if (windowWidth > 1050) {
$(ItemtoAdjust[0]).css(ItemtoAdjust[1], ItemtoAdjust[3]);
}
else if (windowWidth > 800) {
$(ItemtoAdjust[0]).css(ItemtoAdjust[1], ItemtoAdjust[4]);
}
else {
$(ItemtoAdjust[0]).css(ItemtoAdjust[1], ItemtoAdjust[5]);
}
});
}
var myArray = [
/* TARGET PROPERTY >1500 >1050 >800 =< 800 */
[".center", "width", "1390px", "980px", "780px", "300px"],
["#content", "margin-right", "10%", 0, 0, 0],
["#menu_bar li","width", "auto", "auto", "auto", "100%"]
];
$(document).ready(function() {
MscreenAdjust(myArray);
});
$(window).resize(function() {
MscreenAdjust(myArray);
});