jquery combining multiple variables (elements set as vars)

Question

I am trying to learn a bit of Javascript/JQuery for school and got stuck on something I don't quite understand.

Everything in my function "works" as I wanted it to, but it feels odd that I have to list each of my selectors on a different line in order to remove all classes from each.

I've tried .merge and .add as suggestions i read on other posts, but I couldn't make it work (possibly not implementing it right) and I was hoping someone can show me how to do it and maybe explain why something like this doesn't work:

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

This is my entire function, along with it working(just desktop css) on jsFiddle

// 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/

Thanks in advance!

Answer 1

This is riding the line of a duplicate question to: How to combine two jQuery results

One slight difference is you'd have to pass each collection individually, eg:

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

Hopefully this helps and I appreciate your efforts in understanding how to use jQuery efficiently. (eg without engaging the selector engine repeatedly)

Answer 2

You could use something like this

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

EDIT

You can keep your variables and use following syntax object.selector to get the ID value. The only "messy" thing are the string commas.

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

Answer 3

Try the below code,

You can use toggleClass

Find more information about 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>