j查询调整大小时移动元素
jQuery moving elements on resize
我正在努力发现这个jQuery代码的问题所在。我正在尝试将几个元素从一个div 移动到另一个div。取决于屏幕的宽度。该代码适用于页面加载,但在我调整大小时无效。
var domWidth = $(window).width();
//Move around page elements
function moveElements() {
var pageTitle = $('.page-title'),
actionAlert = $('.action-alert'),
banner = $("#banner>.container"),
header = $("header>.container"),
mainContent = $(".main-content");
if (domWidth < 1024) {
pageTitle.prependTo(mainContent);
actionAlert.appendTo(header);
} else {
pageTitle.appendTo(banner);
actionAlert.prependTo(banner);
}
}
$(document).ready(function() {
moveElements();
$(window).resize(function() {
moveElements();
});
});
//Move around page elements
function moveElements() {
var domWidth = $(window).width();
var pageTitle = $('.page-title'),
actionAlert = $('.action-alert'),
banner = $("#banner >.container"),
header = $("#header >.container"),
mainContent = $(".main-content");
if (domWidth < 1024) {
pageTitle.prependTo(mainContent);
actionAlert.appendTo(header);
} else {
pageTitle.appendTo(banner);
actionAlert.prependTo(banner);
}
}
$(document).ready(function() {
moveElements();
$(window).resize(function() {
moveElements();
});
});
对您的代码进行了一些认真的编辑。
代码中的错误是
- 最主要的是你把
var domWidth =$(window).width();
放在函数之外。它应该在函数内,因为每次函数工作时都需要找到宽度。 - 您错过了在
header = $("header>.container")
中输入 #
为了检查,我做了一个工作演示 https://jsfiddle.net/8m0d1462/ (为了检查,将宽度减小到400)
您可以从div 更改侦听器触发事件。
$(window).trigger('resize')
检查此内容以获取更多想法
相关文章:
- 在2个框之间移动元素
- I'我试图在我的网页上动态地上下移动元素.我该怎么做
- 如何通过箭头键连续/平滑地移动元素
- 我应该怎么做才能避免在网页上移动元素(html、css、jQuery)
- 在firefox上的滚动事件中移动元素
- Javascript-通过按下另一个元素来移动元素
- 如何在Javascript中移动元素的旋转点
- 调整大小时移动元素
- 如何通过JS移动元素位置而不闪烁
- 如何前后移动元素
- j查询调整大小时移动元素
- 在元素重叠时移动元素
- 是否可以使用 css 拖动属性来移动元素而不会掉落
- 使用箭头键移动元素 jquery
- 字典中由元素:位置对组成的移动元素
- 保留列表中移动元素的顺序
- 使用具有正确光标定位的 Javascript 移动元素
- 使用 CSS 在容器内移动元素
- 使用 Jquery .after() 来移动元素
- 如何在 JavaScript 中移动
元素