Question

我最近制定了一些脚本来调整某些网站元素的参数到窗口大小。它没有显示错误，但没有改变任何内容。奇怪的是，脚本数组中的所有位置都按我的意愿读取，所以我认为情况并非如此。另一方面，当我使用类似代码但没有数组时，它工作得很好，机器人看起来很难看。

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

Answer 1

正如@roasted在评论中提到的那样

$(document).ready(function(){ $(this).MscreenAdjust(myArray); })
$(window).resize(function(){ $(this).MscreenAdjust(myArray); })

调整脚本的JQuery元素

1 个答案: