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

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

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 2

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