Question

所以我试图分离并附加到基于窗口大小的div。以下是我目前的情况。

我正在使用变量SOCIALBAR创建一个函数，将其分配给＃SOCIALMEDIA并将其分离。然后根据（document）.ready和（window）.resize的窗口大小，我调用SOCIALBARPlACEMENT函数，＃SOCIALMEDIA或者是#TOP或#LEFT divs。

这在（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());

Answer 1

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

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

Answer 2

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

$(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将被触发，因此您不需要准备就绪并调整大小。另外看一下，当你真正按名称传递它时，你正在执行该方法。

Answer 3

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

分离和附加到窗口调整大小

3 个答案: