使用jQuery，如何根据浏览器宽度添加和删除元素

Using jQuery, how do I add and remove elements based on browser width?

本文关键字：添加 删除 元素 浏览器 jQuery 何根 使用      更新时间：2023-09-26

我正在做一些事情，我正在尝试添加和删除基于浏览器宽度的元素。在我的例子(https://jsfiddle.net/swpm3aL1/)，我希望图像出现时，浏览器的宽度为700px或更低，并删除视频，反之亦然。

我有一些代码，但它不工作。我做错了什么?

感谢您的时间和帮助!

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

你显然没有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

如果你想处理onload，调整大小和改变方向，那么下面的代码将是方便的:

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