Come scrivere un'istruzione switch in jQuery/Javascript per verificare se un elemento ha una classe particolare?

Question

Questa è la struttura della dichiarazione if-else sto usando:

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

ci sono un certo numero di casi già e ho pensato utilizzando un'istruzione switch sarebbe più ordinato. Come posso farlo in jQuery/javascript?

Answer 1

Il problema è che un utente può avere più di una classe. In caso contrario, si potrebbe fare:

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

Answer 2

Prova questo. Non molto più pulito, ma ancora una dichiarazione di commutazione.

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

non credo che una singola istruzione switch aiuterà qui, perché un elemento può avere più classi, e non è possibile utilizzare elem.className per passare. Una possibilità è quella di strutturare il codice in maniera più leggibile, utilizzando una dichiarazione in cui per avere interruttori ...:

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

Penso che il modo più pulito potrebbe essere proprio questo:

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

Se tu avessi uno zillion di loro, si potrebbe anche metterli in una struttura di dati come questo:

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

Dal momento che hai chiesto (in un commento) come si dovrebbe fare un gestore di eventi per gli oggetti con nessuna classe nome, ecco come te potrebbe farlo se si stesse cercando non il nome della classe:

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

ho provato qui: http://jsfiddle.net/jfriend00/TAjKR/

Answer 5

Per controllare hasClass in un'istruzione switch:

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

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

Answer 6

So che questo è in ritardo e l'utente ha una sola classe, ma, se ci fosse più di una classe:

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