jquery - @media screen 和 (max-width :1000px) and (min-width:747px)) 的 jQuery 等价物是什么

Question

我想包装这些元素

<div class="nav_menu"></div>
<div clss="logo_wrapper"></div>

屏幕尺寸介于 1000 像素和 747 像素之间。所以我希望它变成这样:

<div class="menu-logo-wrapper">
    <div class="nav_menu"></div>
    <div clss="logo_wrapper"></div>
</div>

我有一堆关于在 jQuery 上只做最小或最大宽度的问题，但我不知道如何将两者结合起来。

只是为了确保我做对了另一部分，我使用的包装 jQuery 是:

$('.mobile_menu_button, .logo_wrapper').wrapAll( "<div class='menu-logo-wrapper'></div>" );

Answer 1

您始终可以使用窗口宽度来添加和删除类或动态更改 UI 内部条件。这是示例代码。

if($(window).width() < 1000 && $(windows).width > 747)
{
  // write something here 
  $( "#idOfYourClass" ).addClass( "your new class" );

}
elseif($(window).width() < 747)
{
  //do something else
}
else { 
 //  $( "#idOfYourClass" ).removeClass( "your new class" ); or maybe something else
}