javascript - jQuery append 功能和调整大小

Question

我正在尝试我的第一个“渐进增强”网站，并且有一个关于 jQuery append 和浏览器大小调整的问题。基本上，我进行了设置，以便加载的默认站点是移动版本，然后我有一个 jQuery 函数，如果浏览器宽度最小为 1100px，则将桌面元素 append 到页面上的 div。

效果很好，但现在我只需要解决调整大小的问题。目前，如果您将浏览器窗口的大小调整为低于 1100 像素宽度，则 append 到 div 的元素不会消失，直到您刷新浏览器。我想这样做，如果浏览器窗口大小调整到 1100px 以下， append 的元素会消失而无需刷新。

有人能给我指出正确的方向吗？谢谢!

HTML:

<div id="section1">

</div>

Javascript:

if (window.matchMedia("(min-width: 1100px)").matches) {
    $("#section1").append("\
        <div class='placeholder'>\
            <img src='assets/site/desktop_placeholder.png' />\
        </div>\
    ");
}

Answer 1

我已经尝试了一下，我想我已经接近了。如果有更好的方法来执行此操作，或者您发现此代码有任何问题，请告诉我。谢谢!

function appendElements() {
    //swap in desktop content
    if (window.matchMedia("(min-width: 1100px)").matches) {
        $("#section1").append("\
            <div class='placeholder'>\
                <img src='assets/site/desktop_placeholder.png' />\
            </div>\
        ");
    }
    }else{
        $("#section1").empty();
    }
}

if (window.matchMedia("(min-width: 1100px)").matches) {
    appendElements();
}

$(window).resize(function(){
    appendElements();    
});