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://reactioncommerce.com/docs/master/installation

如果你想在窗口调整大小

$(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

如果您想处理onload，调整大小和更改方向，那么以下代码将非常方便：

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

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

2 个答案: