0

最近、いくつかのサイト要素のパラメーターをウィンドウ サイズに合わせて調整するスクリプトを作成しました。エラーは表示されませんが、何も変わりません。奇妙なことに、スクリプト配列のすべての場所が思い通りに読み取られるので、そうではないと思います。一方、同様のコードを使用しても配列がなくても完全に機能した場合、ボットは醜く見えました。

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);
});
4

1 に答える 1

0

コメントで@roastedが述べたように

$(document).ready(function(){ $(this).MscreenAdjust(myArray); })
$(window).resize(function(){ $(this).MscreenAdjust(myArray); })
于 2013-05-23T10:44:37.447 に答える