使用jQuery，如何根據瀏覽器寬度添加和刪除元素？

Question

我正在做一些事情，並且正在嘗試根據瀏覽器的寬度添加和刪除元素。 在我的示例（ https://jsfiddle.net/swpm3aL1/ ）中，我希望在瀏覽器寬度為700px或更小時顯示圖像，並刪除視頻，反之亦然。

我有一些代碼，但是沒有用。 我究竟做錯了什么？

感謝您的時間和幫助！

if ($(window).width() > 700) {
    $('body').remove('#image');
    $('body').add('#video');

} else {
    $('body').remove('#video');
    $('body').add('#image');
}

Answer 1

您顯然不是RTFM

if ($(window).width() > 700) {
    $('#image').hide();
    $('#video').show();

} else {
    $('#image').show();
    $('#video').hide();
}

jQuery手冊或jsFiddle手冊https://jsfiddle.net/swpm3aL1/1/

如果要在窗口上調整大小

$(window).on('resize', function(){
    if ($(window).width() > 700) {
        $('#image').hide();
        $('#video').show();

    } else {
        $('#image').show();
        $('#video').hide();
    }
}).trigger('resize'); // <-- and trigger so it works on page load

Answer 2

如果要處理加載，調整大小和更改方向，那么以下代碼將很方便：

$(window).on("orientationchange load resize", function () {
  if ($(window).width() > 700) {
      $('#image').hide();
      $('#video').show();
  } else {
      $('#image').show();
      $('#video').hide();
  }
});