web-dev-qa-db-fra.com

Comment écrire une instruction switch dans jQuery/Javascript pour tester si un élément a une classe particulière?

Voici la structure de la déclaration if-else que j'utilise:

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

Il y a déjà pas mal de cas et je pensais que l'utilisation d'une instruction switch serait plus pratique. Comment puis-je le faire dans jQuery/javascript?

javascriptjqueryclassif-statementswitch-statement
11
catandmouse

Le problème est qu'un utilisateur peut avoir plus d'une classe. Sinon, vous pourriez faire:

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

Essaye ça. Pas beaucoup plus propre, mais toujours une déclaration de commutateur.

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

Je pense que le moyen le plus propre pourrait bien être ceci:

$('.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 vous en avez plusieurs millions, vous pouvez même les placer dans une structure de données comme celle-ci:

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

Puisque vous avez demandé (dans un commentaire) comment vous feriez d'un gestionnaire d'événements pour les objets sans nom de classe, voici comment procéder si vous ne recherchiez aucun nom de classe:

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

Je l'ai testé ici: http://jsfiddle.net/jfriend00/TAjKR/

5
jfriend00

Pour vérifier hasClass dans une instruction switch:

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

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

Je sais que c'est tard et que votre utilisateur n'a qu'une classe, mais s'il y avait plus d'une classe:

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

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

Je ne pense pas qu'une seule instruction switch aidera ici, car un élément peut avoir plusieurs classes et vous ne pouvez pas utiliser elem.className pour basculer. Une option consiste à structurer le code de manière plus lisible, en utilisant une instruction for dans laquelle avoir des commutateurs ...: 

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

        }
    }       
});
0
Alex Pacurar

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

0
Mr. HK