Cómo escribir una declaración de interruptor en jQuery/Javascript para probar si un elemento tiene una clase en particular?

Question

Esta es la estructura de la instrucción if-else que estoy utilizando:

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

hay un buen número de casos ya y pensé utilizando una sentencia switch sería más ordenado. ¿Cómo lo hago en jQuery/javascript?

Answer 1

El problema es que un usuario puede tener más de una clase. De lo contrario se podría hacer:

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

Answer 2

Pruebe esto. No es mucho más limpio, pero sigue siendo una declaración de cambio.

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

no creo que una sola instrucción switch ayudará aquí, porque un elemento puede tener varias clases, y no se puede utilizar para cambiar elem.className. Una opción es estructurar el código de una manera más fácil de leer, para el uso de un comunicado en el que tener interruptores ...:

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

     } 
    }  
}); 

Answer 4

creo que la manera más limpia podría ser la siguiente:

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

Si usted tuvo un trillón de ellos, incluso se podría ponerlos en una estructura de datos de la siguiente manera:

// 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); 
}); 

Desde lo solicitado (en un comentario) cómo lo haría un controlador de eventos para los objetos sin clase nombre, así es como tú podría hacer eso si se busca ningún nombre de clase:

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

he comprobado aquí: http://jsfiddle.net/jfriend00/TAjKR/

Answer 5

Para comprobar hasClass en una sentencia switch:

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

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

Answer 6

Sé que es tarde y su usuario solo tiene una clase, pero si hubiera más de una clase:

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

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

Answer 7

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

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

 
    }); 
 

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

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

 
    }); 
 

 
\t $("#reset").click(function() { 
 
\t 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 { 
 
    \t background:red; 
 
    } 
 
    .blueColor { 
 
    \t 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>