Question

如何始终收听window.width()并根据宽度值加载不同的HTML代码？我使用window.width()和replaceWith()。

它仅在我打开页面时有效，而在我调整浏览器窗口大小时不起作用。

我的html文件中的代码：

    var width;
    $(window).resize(function() {
        width = $(window).width();
        if (width < 768) {
            $("#the_dropdown").replaceWith("<p>Less than 768</p>");
        } else {
            $("#the_dropdown").replaceWith("<p> More than 768</p>");
        }
    });
    $(window).trigger('resize');

Demo

另一个问题，replaceWith()是否适用于涉及长HTML代码（超过1行）的情况？

我已根据特定窗口的宽度完成了一些HTML代码集，我想将其放在我的#the_dropdown div中。

Answer 1

您的代码不起作用，因为replaceWith()替换了所选元素。在您的情况下，id为#the_dropdown的元素。因此，在下一个触发器中，找不到此元素，也不会写入任何文本。

将replaceWith()替换为.html()。

Demo

如何基于window.width（）加载不同的HTML？

1 个答案: