Question

我创建了以下jQuery脚本，如果屏幕宽度等于或小于767px，它将在另一个（#primary）之前移动div（#secondary），这样可以正常工作。

jQuery(document).ready(function(){
if(screen.width<=767){
jQuery('#secondary').insertBefore('#primary');
}
});

但是我希望实际的功能在屏幕宽度和具有特定类（body.single）的主体上触发。我写了以下内容，但它没有用，我觉得我在和声明的某个地方出错了，这就是我到目前为止所做的。

jQuery(document).ready(function(){
if(screen.width<=767) && ('body').hasClass('.single')    {
jQuery('#secondary').insertBefore('#primary');
}
});

我希望有人能够解释我做错了什么以及如何纠正它。在此先感谢所有

Answer 1

第1名：正如评论.hasClass('class without dot')

中所述

第二名： ('body')假设为jQuery('body')

第3名，if语句像这样使用

if(screen.width() <=767 && $('body').hasClass('.single')){

最后您的代码应

jQuery(document).ready(function(){
  if( screen.width() <= 767  && jQuery('body').hasClass('single')){
   jQuery('#secondary').insertBefore('#primary');
  }
});

Working Demo

注意：我不知道您对屏幕的定义或您定义的位置，但是当您说（这样可以正常工作。）我的代码应该有效和你一起..如果你需要，你可以使用$(window).width()代替screen.width()

jQuery(document).ready(function(){
  if( $(window).width() <= 767  &&
  jQuery('body').hasClass('single')){
   jQuery('#secondary').insertBefore('#primary');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="single">
  <div id="primary">Primary</div>
  <div id="secondary">Secondary</div>
</body>

Answer 2

感谢所有贡献者，无论我做了什么，我根本无法使代码工作，我还有许多其他代码片段也在运行，可能是导致问题的原因。

然而，我确实找到了一个解决方案并回顾它，我应该尽早发布它。而不是询问屏幕宽度是否小于767并且如果主体具有单一类，我只需要更改实际的div被移动，如此。

win-unicode-console

我希望这可以帮助其他有同样问题的人。

全部谢谢

JQuery触发insertBefore基于屏幕宽度和body类

2 个答案: