Question

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

它运作良好，但现在我只需要解决调整大小问题。目前，如果您将浏览器窗口的大小调整为低于1100px宽度，则在刷新浏览器之前，附加到div的元素不会消失。我想这样做，如果浏览器窗口调整大小低于1100px，附加的元素消失而不刷新。

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

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();    
});

jQuery追加函数和调整大小

1 个答案: