0

所以我试图根据窗口大小分离并附加到一个 div 。以下是我目前拥有的。

我正在创建一个带有变量 SOCIALBAR 的函数，将其分配为 #SOCIALMEDIA 并将其分离。然后根据 (document).ready 和 (window).resize 的窗口大小，我调用 SOCIALBARPlACEMENT 函数，#SOCIALMEDIA 是附加到 #TOP 或 #LEFT div。

这在 (document).ready 上工作得很好，但对 (window).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());
4

3 回答 3

1

您正在立即调用这些函数，而不是将它们作为事件处理程序传递，请尝试：

$(document).ready(socialbarplacement);
$(window).resize(socialbarplacement);
/*
someFunction() <-- invokes the function and resolves to the returned value
someFunction <-- resolves to the function reference
*/
于 2012-07-24T18:28:53.583 回答
0

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

$(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');
    }
});

页面加载时会触发调整大小，因此您不需要同时准备好和调整大小。还看着它，当您确实应该按名称传递它时，您正在执行该方法。

于 2012-07-24T18:36:44.463 回答
0

我试过这样......享受吧！

$(function () {

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

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

});
<!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>

于 2016-01-09T12:03:57.477 回答