如何在 jQuery/Javascript 中编写 switch 语句来测试元素是否具有特定的类？答案

【问题标题】：How to write a switch statement in jQuery/Javascript to test if an element has a particular class?如何在 jQuery/Javascript 中编写 switch 语句来测试元素是否具有特定的类？
【发布时间】：2011-09-15 15:28:41
【问题描述】：

这是我正在使用的 if-else 语句的结构：

$('.myclass a').click(function() {
   if ($(this).hasClass('class1')) {
        //do something
   } else if ($(this).hasClass('class2')) {
        //do something
   } else if ($(this).hasClass('class3')) {
        //do something
   } else if ($(this).hasClass('class4')) {
        //do something
   } else {
        //do something
   }
});

已经有很多案例了，我认为使用 switch 语句会更简洁。我如何在 jQuery/javascript 中做到这一点？

【问题讨论】：

.myclass a 只有一个类吗？
为什么不直接将click事件处理程序绑定到对应类的链接上呢？
@sberry2A - 它只有 1 个类。
@Felix Kling - 我也可以试试。

标签： javascript jquery class if-statement switch-statement

【解决方案1】：

试试这个。不是很干净，但仍然是一个 switch 语句。

$('.myclass a').click(function() {
    switch (true) {
      case $(this).hasClass('class1'):
        // do stuff
        break;
      case $(this).hasClass('class2'):
        // do stuff
        break;
      case $(this).hasClass('class3'):
        // do stuff
        break;
    }
}

【讨论】：

@Tesserex：是的，这不是最棒的。我更喜欢 Nicola。
这对我有用..我也这么想...谢谢
@XyanEwing Nicola 怎么样了？如果类属性中有更多类，则此方法有效，Nicola 在这种情况下失败。
这比公认的答案更准确。想象一下，如果 element1 具有类 class1.class2 并且 element2 具有类 class3.class4 并且您想测试哪个元素具有类 class1 每个元素上的任何其他类列表

【解决方案2】：

问题是一个用户可以拥有多个类。否则你可以这样做：

$('.myclass a').click(function() {
   var className = $(this).attr('class');
   switch(className){
      case 'class1':
     //put your cases here
   }
});

【讨论】：

使用名为 class 的变量不是一个好主意，因为我认为这是 Javascript 中的保留字（保留供将来使用）。将其更改为 className 或 class 以外的其他名称。
做到了，谢谢您的建议
这样可以节省很多代码但是如果 $(this) 有多个类呢？
我认为这不是很有效，因为如果在同一个类属性上有多个类，我不太确定它会起作用，因为你会在一个单弦线。在这种情况下，您的返回值将是“class1 class2 class3”，这意味着您的案例永远不会是真的

【解决方案3】：

我认为最干净的方法可能就是这样：

$('.myclass a.class1').click(function() {
   // code to process class1
});

$('.myclass a.class2').click(function() {
   // code to process class2
});

$('.myclass a.class3').click(function() {
   // code to process class3
});

$('.myclass a.class4').click(function() {
   // code to process class4
});

如果你有无数个，你甚至可以把它们放在这样的数据结构中：

// to define them all
var classHandlers = {
    class1: function() {
        // class1 code here
    },
    class2: function() {
        // class2 code here
    },
    class3: function() {
        // class3 code here
    },
    class4: function() {
        // class4 code here
    }
};

// to register them all
$.each(classHandlers, function(key, fn) {
    $('.myclass a.' + key).click(fn);
});

既然您已经询问（在评论中）您将如何为没有类名的对象执行事件处理程序，那么如果您正在寻找没有类名的对象，您可以这样做：

$(".myclass a").not("[class]").click(function() {
    // code to handle objects with no class name here
});

我在这里测试过：http://jsfiddle.net/jfriend00/TAjKR/

【讨论】：

我试过这个，这也有效（看起来更干净）。但是，如果我想在没有类的“.myclass a”上做一些事情（在 switch 语句中，它是默认值）怎么办？我在哪里附加事件处理程序？
我在答案中添加了一种实现无类名的默认情况的方法。

【解决方案4】：

我认为单个 switch 语句在这里不会有帮助，因为一个元素可以有多个类，并且您不能使用 elem.className 进行切换。一种选择是以更易读的方式构造代码，使用 for 语句，其中有开关......：

$('.myclass a').click(function() 
{
    var classes = ["class1", "class2", "class3","class4"];
    var self = $(this);
    for(var i =0, ii = classes.length;i<ii;i++)
    {
        var className = classes[i];
        if(self.hasClass(className))
        {
            switch(className)
            {
                case 'class1':
                    //code here... 
                break;
                case 'class2':
                    //code here... 
                break;      
                case 'class3':
                    //code here... 
                break;     
                case 'class4':
                    //code here... 
                break;
            }

        }
    }       
});

【讨论】：

这是工作，但与接受或@Xyan Ewing 的答案相比，它需要更多的操作。 Bcz 这应该是一个数组并在 find element hasclass .something 之前迭代它们。我相信这也需要更多的内存

【解决方案5】：

在 switch 语句中检查 hasClass：

var elementClass;
var classCheck = $('#myElement').hasClass(elementClass)

switch(classCheck){
  case elementClass === 'foo':
     console.log('whatever');
     break;
}

【讨论】：

请编辑更多信息。不鼓励使用纯代码和“试试这个”的答案，因为它们不包含可搜索的内容，也没有解释为什么有人应该“试试这个”。我们在这里努力成为知识的资源。

【解决方案6】：

我知道这已经晚了，您的用户只有一堂课，但是，如果有不止一堂课：

//<div class="foo bar"></div>
//<div class="other bar"></div>

switch(true) {
  case 'foo':
    true;
    break;
  case 'other':
    true;
}

【讨论】：

【解决方案7】：

    $("#isTest").click(function () {

	  if($('div').is('.redColor')){
	  	$('div').addClass('blueColor');
	  }

    });

    $("#hasClassTest").click(function () {

	  if($('div').hasClass('.redColor')){
	  	$('div').addClass('blueColor');
	  }

    });

	$("#reset").click(function () {
	  location.reload();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<style type="text/css">
  .redColor {
  	background:red;
  }
  .blueColor {
  	background:blue;
  }
 </style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
  <h1>jQuery check if an element has a certain class</h1>

  <div class="redColor">This is a div tag with class name of "redColor"</div>

  <p>
  <button id="isTest">is('.redColor')</button>
  <button id="hasClassTest">hasClass('.redColor')</button>
  <button id="reset">reset</button>
  </p>

</body>
</html>

【讨论】：