分离和AppendTo窗口调整大小

问题描述：

所以我想分离和appendTo基于窗口大小的div。以下是我目前拥有的。分离和AppendTo窗口调整大小

我正在用一个变量SOCIALBAR创建一个函数，赋值它等于#SOCIALMEDIA并将其分开。然后基于（document）.ready和（window）.resize的窗口大小，我调用SOCIALBARPlACEMENT函数，并且#SOCIALMEDIA或者适用于#TOP或#LEFT div。

这可以在（文档）.ready中正常工作，但对（窗口）.resize不起作用。

事实上，如果我删除document.ready，并离开window.resize，该函数仍然在页面加载上运行，但不能在页面大小调整上运行。

任何想法将不胜感激。谢谢！

function socialbarplacement() { 
    var socialbar; 
    socialbar = $("#socialmedia").detach(); 
    if (jQuery(window).width() < 1384) { 
     socialbar.appendTo("#top"); 
    } else { 
     socialbar.appendTo("#left"); 
    } 
}; 
$(document).ready(socialbarplacement()); 
$(window).resize(socialbarplacement());

答

您所呼叫的功能立即而不是将它们作为事件处理程序，尝试：

$(document).ready(socialbarplacement); 
$(window).resize(socialbarplacement); 
/* 
someFunction() <-- invokes the function and resolves to the returned value 
someFunction <-- resolves to the function reference 
*/

非常感谢！新的JavaScript和jQuery – 2012-07-24 18:33:38

答

我可能会做一些沿着这些线路（未测试的代码）：

$(window).resize(function(){ 
    var wnd = $(window), soc = $('#socialmedia'); 
    return function(){ 
     // might add a check to make sure you are not appending to the current parent. 
     soc.appendTo($(window).width() > 1384 ? '#left' : '#top'); 
    } 
});

当页面加载时Resize会被触发，所以你不需要准备好和调整大小。同样看着它，你正在执行的方法，当你真的应该通过名称传递它。

答

我试过这样...享受！

$(function() { 
 

 
    if (matchMedia) { 
 
\t var mq = window.matchMedia('(max-width: 1384px)'); 
 
\t var socialmedia = $("#socialmedia"); 
 
\t mq.addListener(WidthChange); 
 
\t WidthChange(mq); 
 
\t } 
 

 
\t function WidthChange(mq) { 
 
\t if (mq.matches && socialmedia) { 
 
\t \t socialmedia.appendTo("#top"); 
 
\t \t socialmedia = null; \t 
 
\t } else { 
 
\t \t socialmedia = $("#socialmedia").detach(); \t 
 
     socialmedia.appendTo("#left"); 
 
\t } 
 
\t }; 
 

 
});

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Untitled Document</title> 
 
    
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    
 
</head> 
 

 
<body> 
 
    
 
    <div id="top"> 
 
    <div id="socialmedia">SOCIALMEDIA</div> <br> 
 
    **TOP** 
 
    </div> 
 
    
 
    <div id="left"> 
 
    <br> 
 
    **LEFT** 
 
    </div> 
 
    
 
</body> 
 
    
 
</html>

分离和AppendTo窗口调整大小

相关推荐