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 回答