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

Question

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

我的函数 "works" 中的所有内容都如我所愿，但感觉很奇怪，我必须在不同的行上列出我的每个选择器，以便从每个选择器中删除所有类。

我已经尝试过 .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 值。唯一的 "messy" 是字符串逗号。

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

Answer 2

试试下面的代码，

您可以使用 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>

Answer 3

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

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

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

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

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

jquery combining multiple variables (elements set as vars)

javascript

variables

jquery

jquery-selectors