[英]Using jQuery, how do I add and remove elements based on browser width?
我正在做一些事情,并且正在尝试根据浏览器的宽度添加和删除元素。 在我的示例( 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
如果要处理加载,调整大小和更改方向,那么以下代码将很方便:
$(window).on("orientationchange load resize", function () {
if ($(window).width() > 700) {
$('#image').hide();
$('#video').show();
} else {
$('#image').show();
$('#video').hide();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.