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

Questa è la struttura di if-else, che sto utilizzando:

$('.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 di usare un interruttore dichiarazione sarebbe più ordinato. Come faccio a farlo in jQuery/javascript?

  • non .myclass a, hanno una sola classe?
  • Perché non associare il gestore dell’evento click direttamente il link con la corrispondente classe?
  • Ha solo 1 classe.
  • Kling – posso provare anche questo.
InformationsquelleAutor catandmouse | 2011-09-15



7 Replies
  1. 19

    Il problema è che un utente potrebbe avere più di una classe. Altrimenti si potrebbe fare:

    $('.myclass a').click(function() {
       var className = $(this).attr('class');
       switch(className){
          case 'class1':
         //put your cases here
       }
    });
    • Questo ha funzionato per me in quanto ha solo 1 classe. Grazie.
    • Non è una buona idea di utilizzare una variabile di nome class come credo che è una parola riservata in Javascript (riservato per uso futuro). Cambiare className o qualcosa oltre class.
    • Fatto, grazie per il suggerimento
    • questo consente di risparmiare un sacco di codice, ma che cosa succede se $(this) ha più di una classe?
    • Non credo che questo è molto efficiente, poiché se hanno più classi nello stesso attributo di classe, io non sono molto sicuro che avrebbe funzionato dal momento che si sarebbe stata la restituzione di tutte le classi in un unico filo. il valore restituito in questo caso sarebbe “classe1 classe2 class3”, che significa che i casi non sarebbe mai vero
  2. 19

    Provare questo. Non molto più pulito, ma ancora una istruzione 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;
        }
    }
    • +1 per la creatività, ma ancora un po ‘ inutile.
    • Sì, non è il massimo. Mi piace Nicola è molto meglio.
    • Questo funziona per me.. stavo pensando stesso troppo… Grazie
    • Come è Nicola di meglio? Questo funziona se ci sono più classi nell’attributo di classe, Nicola non riesce in quel caso.
  3. 5

    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 hai avuto un triliardo 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);
    });

    Visto che hai chiesto (in un commento), come si farebbe di un gestore di eventi per gli oggetti con il nome della classe, ecco come si potrebbe fare che se stavi cercando non di classe nome:

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

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

    • Ho provato questo e funziona anche (molto pulito). Tuttavia, che cosa devo fare se voglio fare qualcosa ‘.myclass un’ che non ha alcuna classe (in istruzione switch, è il valore di default)? Dove devo attaccare il gestore di eventi?
    • Ho aggiunto alla mia risposta un modo per implementare il caso di default di no nome della classe.
    • Grazie. Ha lavorato.
  4. 0

    Non credo che una singola istruzione switch aiuterà qui, perché un elemento può avere più classi, e non è possibile utilizzare elem.className per passare. Un’opzione è quella di strutturare il codice in modo più leggibile, utilizzando un istruzione che passa…:

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

    Per controllare hasClass in un’istruzione switch:

    var elementClass;
    var classCheck = $('#myElement').hasClass(elementClass)
    
    switch(classCheck){
      case elementClass === 'foo':
         console.log('whatever');
         break;
    }
    • Si prega di modificare con ulteriori informazioni. Solo codice e “prova questo” risposte sono scoraggiato, perché non contengono alcun contenuto ricercabile, e non si spiegano perché qualcuno dovrebbe “provare questo”. Facciamo uno sforzo per essere una risorsa per la conoscenza.
  6. 0

    So che è tardi e che il tuo 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;
    }
  7. 0

    JS:

        $("#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();
        });

    HTML:

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

Lascia un commento