Question

我正在尝试为学校学习一些Javascript / JQuery，并且遇到了一些我不太了解的事情。

我的功能中的一切＆＃34;工作＆＃34;正如我想要的那样，但是我必须在不同的行上列出每个选择器以便从每个选择器中删除所有类，这感觉很奇怪。

我已尝试过.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

你可以使用这样的东西

/(?=.*(opera|safari|firefox))(?!.*chrome).*/i

修改

您可以保留变量并使用以下语法$('#menu-wrapper, #menu-icon, #menu-trigger-wrapper, #custom-wrapper').removeClass();来获取ID值。唯一“杂乱”的东西是字符串逗号。

object.selector

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>

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

3 个答案: