jquery组合多个变量（元素设置为vars）

Question

我正在尝试为学校学习一点 Javascript/JQuery，但遇到了一些我不太了解的东西。

我的函数中的所有内容都按我的意愿“工作”，但我必须将每个选择器列出在不同的行上才能从每个选择器中删除所有类，这感觉很奇怪。

我已经尝试了 .merge 和 .add 作为我在其他帖子上阅读的建议，但我无法使其工作（可能没有正确实施），我希望有人能告诉我如何做到这一点，也许可以解释一下为什么这样的事情不起作用：

$(menuWrapper, menuTrigger, menuIcon, contentWrapper).removeClass();

这是我的全部功能，以及它在 jsFiddle 上的工作（只是桌面 css）

// JavaScript Document
function toggleNavSettings(swipeDirection) {

    menuWrapper = $("#menu-wrapper");
    menuIcon = $('#menu-icon');
    menuTrigger = $("#menu-trigger-wrapper");
    contentWrapper = $("#custom-wrapper");
    if(menuWrapper.width() > 199){//if nav expanded
        if($( document ).width() > 480){//if screen is not mobile
        menuWrapper.removeClass();
        menuTrigger.removeClass();
        menuIcon.removeClass();
        contentWrapper.removeClass();
        menuWrapper.addClass("menu-collapsed");//collapse the emenu
        menuTrigger.addClass("menu-trigger-wrapper-d-closed");//swing the trigger
        menuIcon.addClass("open-d");
        contentWrapper.addClass("closed-d");//collapse the content pane
        }   
        else{//if screen is Mobile
        menuWrapper.removeClass();
        menuTrigger.removeClass();
        menuIcon.removeClass();
        contentWrapper.removeClass();
        menuWrapper.addClass("menu-collapsed-m");//expand menu for desktop
        menuTrigger.addClass("menu-trigger-wrapper-d-closed");//swing the trigger
        menuIcon.addClass("open-d");
        contentWrapper.addClass("closed-d");
        }
    }   
    else{//if NAV is collapsed  
        if($( document ).width() > 480){//if screen is not mobile
        menuWrapper.removeClass();
        menuTrigger.removeClass();
        menuIcon.removeClass();
        contentWrapper.removeClass();
        menuWrapper.addClass("menu-expanded");//expand menu
        contentWrapper.addClass("open-m");//expand the content pane
        }   
        else{//if window screen is MOBILE
        menuWrapper.removeClass();
        menuTrigger.removeClass();
        menuIcon.removeClass();
        contentWrapper.removeClass();
        menuWrapper.addClass("menu-expanded-m");//expand the menu
        menuTrigger.addClass("menu-trigger-wrapper-m-open");//swing the trigger
        menuIcon.addClass("open-m");
        contentWrapper.addClass("open-d");//expand the content pane
    }
    }   
}



$(document).ready(function() {
    var menuTrigger = $("#menu-trigger-wrapper");

menuTrigger.click(function() {
toggleNavSettings(null);

});


});

https://jsfiddle.net/o5ogex6q/1/

提前致谢！

Answer 1

你可以使用这样的东西

$('#menu-wrapper, #menu-icon, #menu-trigger-wrapper, #custom-wrapper').removeClass();

编辑

您可以保留变量并使用以下语法object.selector 来获取 ID 值。唯一“凌乱”的是字符串逗号。

$(menuWrapper.selector+","+ menuTrigger.selector+","+menuIcon.selector+","+ contentWrapper.selector).removeClass();

Answer 2

这是一个重复的问题：How to combine two jQuery results

一个细微的区别是您必须单独传递每个集合，例如：

var allMenuObjects = menuWrapper.add(menuIcon).add(menuTrigger).add(contentWrapper);

希望这会有所帮助，感谢您在理解如何有效使用 jQuery 方面所做的努力。 （例如，不重复使用选择器引擎）

Answer 3

试试下面的代码，

你可以使用toggleClass

查找有关toggleClass的更多信息

function toggleNavSettings(swipeDirection) {

  menuWrapper = $("#menu-wrapper");
  menuIcon = $('#menu-icon');
  menuTrigger = $("#menu-trigger-wrapper");
  contentWrapper = $("#custom-wrapper");
  
  if ($(document).width() > 480) { //if screen is not mobile
    
    menuWrapper.toggleClass("menu-collapsed"); 
    menuTrigger.toggleClass("menu-trigger-wrapper-d-closed"); 
    menuIcon.toggleClass("open-d");
    contentWrapper.toggleClass("closed-d");
    
  } else { //if screen is Mobile
    
    menuWrapper.toggleClass("menu-collapsed-m"); 
    menuTrigger.toggleClass("menu-trigger-wrapper-d-closed"); 
    menuIcon.toggleClass("open-d");
    contentWrapper.toggleClass("closed-d");
    
  }

}


$(document).ready(function() {
  
  var menuTrigger = $("#menu-trigger-wrapper");

  menuTrigger.click(function() {
  toggleNavSettings(null);
  });
  
});

@charset"utf-8";

/* CSS Document */

html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  background: #121212;
  color: #00c4e2;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.template-wrapper {
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
#custom-wrapper,
#custom-wrapper.open-d {
  padding-left: 210px;
  transition: all 0.4s;
}
#custom-wrapper.closed-d {
  padding-left: 10px;
}
.content-page {
  position: relative!important;
}
#menu-wrapper {
  background: url(../images/menu_pattern_1.png);
  background-repeat: repeat;
  border-right: #00c4e2 10px solid;
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 200px;
  overflow-y: auto;
  height: 100%;
  transition: all 0.4s;
  z-index: 1001;
}
.menu-expanded {
  width: 200px;
}
.menu-collapsed {
  width: 0px!important;
}
.menu-collapsed-m {
  width: 0px!important;
}
.menu-wrapper.scroll {
  width: 210px;
  border-right: none;
}
#menu-trigger-wrapper {
  transition: all 0.4s;
  position: fixed;
  display: block;
  top: 0px;
  left: 209px;
  background: #00c4e2;
  width: 48px;
  height: 48px;
  color: #fff;
  cursor: pointer;
  z-index: 1002;
}
.menu-trigger-wrapper-d-closed {
  left: 9px!important;
}
.menu-trigger {
  width: 100%;
  height: 100%;
  position: relative;
}
/*MENU ANIMATIONS*/

/* Icon 1 */

#menu-icon {
  width: 86%;
  height: 100%;
  position: relative;
  margin: 10px 0px 0px 1px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
#menu-icon span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#menu-icon span:nth-child(1) {
  top: 0px;
}
#menu-icon span:nth-child(1),
#menu-icon.open-d span:nth-child(1) {
  top: 12px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
#menu-icon span:nth-child(2) {
  opacity: 0;
  top: 12px;
}
#menu-icon.open-d span:nth-child(1) {
  opacity: 100;
}
#menu-icon span:nth-child(3),
#menu-icon.open-d span:nth-child(3),
#menu-icon.open-m span:nth-child(3) {
  top: 12px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#menu-icon.open-d span:nth-child(1) {
  top: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(-0deg);
  -o-transform: rotate(-0deg);
  transform: rotate(-0deg);
}
#menu-icon.open-d span:nth-child(2) {
  top: 12px;
  opacity: 100;
}
#menu-icon.open-d span:nth-child(3) {
  top: 24px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(-0deg);
  -o-transform: rotate(-0deg);
  transform: rotate(-0deg);
}
.content-page {
  margin-left: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="menu-trigger-wrapper">
  <div id="menu-icon"> <span></span>
    <span></span>
    <span></span>

  </div>
</div>
<div id="menu-wrapper" data-mcs-theme="inset">
  <div class="menu-container"> <a href="#page1" data-transition="turn">Link 1</a>

    <br> <a href="#page2" data-transition="turn">Link 2</a>

    <br> <a href="#page2" data-transition="turn">Link 3</a>

    <br>
  </div>
</div>
<div id="custom-wrapper">blah blah</div>