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

Posted 2023-03-05

【中文标题】jquery组合多个变量（元素设置为vars）

【英文标题】：jquery combining multiple variables (elements set as vars)

【发布时间】：2016-01-20 18:59:52

【问题描述】：

我正在尝试为学校学习一点 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/

提前致谢！

【参考方案1】：

你可以使用这样的东西

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

编辑

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

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

【讨论】：

谢谢，但这就是为什么我很好奇为什么使用我已经声明的变量不起作用。我想将它们保留为变量，因此以后我可以切换每个变量的值并避免对 ID/Class 选择器进行硬编码。为了简单起见，我在函数中设置了我的变量，但稍后我计划将它们作为函数中的参数传递。

谢谢！这也有效。我觉得 .add 方法使代码更简洁，因为我可以在函数的开头组合我的对象，然后简单地使用 allMenuObjects.removeClass(); 执行。需要时。不确定哪一个性能更好，但一步一步：）谢谢！

【参考方案2】：

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

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

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

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

【讨论】：

谢谢！这使代码更清晰（IMO）。并为类似的问题道歉，我在最初的搜索中没有找到其他帖子。

【参考方案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>

【讨论】：

谢谢，但我不认为toggleClass适合我，因为每个类都会有2个状态开和关，我需要有能力让每个类独立控制其他不属于此函数的变量。