如何基于 window.width() 加载不同的 HTML

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

演示

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

我已经根据特定窗口的宽度做了一些 HTML 代码集，我想相应地将其放在我的 #the_dropdowndiv 中。

Answer 1

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

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

演示