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

这是我正在使用的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中实现它？

试试这个。不太干净，但仍然是一个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;
    }
}

---

问题是一个用户可能有多个类。否则，您可以：

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

---

我不认为一个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;
            }

        }
    }       
});

$（'.myclass a'）。单击（函数（）
{
变量类=[“类1”、“类2”、“类3”、“类4”]；
var self=$（这是）；
对于（var i=0，ii=classes.length；i我认为最干净的方法可能是：

$('.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
});

我在这里进行了测试：
要在switch语句中检查hasClass：

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

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

我知道这已经晚了，而且您的用户只有一个类，但是，如果有多个类：

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

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

//
//
开关（真）{
案例“foo”：
是的；
打破
“其他”案例：
是的；
}

$（“#isTest”）。单击（函数（）{
如果（$（'div'）.is（'redColor'））{
$（'div'）.addClass（'blueColor'）；
}
});
$（“#hasClassTest”）。单击（函数（）{
if（$（'div'）.hasClass（'.redColor'））{
$（'div'）.addClass（'blueColor'）；
}
});
$（“#重置”）。单击（函数（）{
location.reload（）；
})；

.红颜色{
背景：红色；
}
.蓝色{
背景：蓝色；
}
jQuery检查元素是否具有特定的类
这是一个类名为“redColor”的div标记

是（“.redColor”）
hasClass（“.redColor”）
重置

myclass a

只有一个类吗？为什么不直接将点击事件处理程序绑定到对应类的链接上？@sberry2A-它只有一个类。@Felix Kling-我也可以试试。@Tesserex:是的，它不是最好的。我更喜欢Nicola的。这对我很有用。.我也有同样的想法。。。Thanks@XyanEwing Nicola的更好点是什么？如果class属性中有更多的类，则此方法有效，Nicola在这种情况下失败。这比公认的答案更准确。想象一下，如果

element1

有class

class1.class2

和

element2

有class

class3.class4

，您想测试哪个元素有class

>class1

每个元素上的任何其他类列表使用名为

class

的变量不是一个好主意，因为我认为这在Javascript中是一个保留字（保留供将来使用）。将其更改为

className

或

class

以外的其他内容。这样做了吗，建议使用thanx这节省了大量代码，但如果$（这个）有多个类？我认为这不是很有效，因为如果在同一个class属性上有多个类，我不确定它是否有效，因为您将在一个字符串行中返回所有类。在本例中，您的返回值将是“class1 class2 class3”，这意味着您的案例永远不会是真实的。我尝试了这一个，这也可以（看起来更干净）。但是，如果我想在没有类的“.myclass a”上执行某些操作（在switch语句中，它是默认值），该怎么办？我将事件处理程序附加到何处？我在答案中添加了一种实现无类名默认情况的方法。请使用更多信息进行编辑。不鼓励使用“仅代码”和“尝试此”答案，因为它们不包含可搜索的内容，并且没有解释为什么有人应该“尝试此”。我们在这里努力成为知识的资源。这是一项工作，但与公认的或@Xyan Ewing的答案相比，它需要更多的行动。Bcz这应该是在查找元素hasclass

之前创建一个数组并进行迭代。某些内容

。我相信这也需要更多的内存