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

Question

这是我正在使用的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中执行此操作？

Answer 1

试试这个.不太清洁,但仍然是一个转换声明.

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

Answer 2

问题是用户可能有多个班级.否则你可以这样做:

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

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