JQuery 触发器插入之前基于屏幕宽度和正文类别

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

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

但是，我希望实际函数在屏幕宽度和具有特定类（body.single）的主体上触发。我已经写了以下内容，但它不起作用，我认为我在 and 语句的某个地方出错了，这就是我到目前为止所拥有的。

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

我希望有人能够解释我做错的地方以及如何纠正它。提前感谢大家

1st：正如评论.hasClass('class without dot')中所述

第二：('body')假设是jQuery('body')

3rd：使用 if 语句像这样使用它

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

最后你的代码应该是

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

工作演示

注意：我不知道你对屏幕是什么意思，或者你在哪里定义它，但是当你说（这工作正常）时，我的代码应该可以工作和你在一起..如果需要，您可以使用$(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>

感谢所有做出贡献的人，但是无论我做什么，我都无法让代码工作，我还有许多其他代码片段在运行，可能是它们导致了问题。

但是我确实找到了解决方案，回头看，我应该早点发布它。我不需要询问屏幕宽度是否小于 767 以及身体是否具有单类，我只需要更改像这样移动的实际div。

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

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

谢谢大家

相关内容

最新更新

热门标签：