jQuery在调整大小时移动元素答案

【问题标题】：jQuery moving elements on resizejQuery在调整大小时移动元素
【发布时间】：2016-07-06 16:37:42
【问题描述】：

我正在努力找出这个 jQuery 代码的问题所在。我正在尝试将几个元素从一个 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();
    });

});

【问题讨论】：

标签： javascript jquery html css appendto

【解决方案1】：

 //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）

【讨论】：

感谢您的帮助。这是因为“domWidth”在函数之外。 :D

【解决方案2】：

您可以从 div 更改监听器触发事件。

$(window).trigger('resize')

查看this 了解更多信息

【讨论】：