Question

以下代码用作替代浏览器宽度的媒体查询和修改各种符号宽度的css文件。但是，当代码运行一段时间（网站加载时），条件：（宽度＆gt; = 767）＆amp;＆amp; （宽度<1042）首先在小于1042的所有宽度上加载。例如，如果宽度为400，则将使用medium2.css。

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 1042) {
        $(".leftNavigationBox").hide();
    }
    if (width < 440) {
        $(".container").hide();
        $("#sizestylesheet").attr("href", "/Styles/Reallynarrow3.css");
    } else if ((width > 441) && (width < 767)) {
        $(".container").hide();
        $("#sizestylesheet").attr("href", "/Styles/narrow2.css");
    } else if ((width > 768) && (width < 1042)) {
        $(".container").hide();
        $("#sizestylesheet").attr("href", "/Styles/Medium2.css");
    } else {
        $(".leftNavigationBox").show();
        $(".container").show();
        $("#sizestylesheet").attr("href", "/Styles/SiteNew28.css");
    }
}

$(function () {
    adjustStyle($(this).width());
    $(window).resize(function () {
        adjustStyle($(this).width());
    });
});

Answer 1

$(this)指的是附加事件或方法的jQuery对象。

$(function(){是$(document).ready()的简写，因此在第一次调用$(this)时会引用document。调整大小$(this)时会引用window。

要解决此问题，只需在第一次通话时将$(window).width()而不是$(this)传递给adjustStyle()方法。

$(function () {
    adjustStyle($(window).width());
    $(window).resize(function () {
        adjustStyle($(this).width());
    });
});

初始浏览器宽度上的JQuery无法正常工作（仅在调整大小时有效）

1 个答案: