Cómo comprobar className en una sentencia switch cuando un elemento tiene múltiples classs

En el siguiente ejemplo, solo quiero que se click la opción para mostrar en una alerta. Intento utilizar una instrucción switch para determinar en qué class se hizo clic. Mi ejemplo funcionaría si mis divs no contienen cada uno más de una class. Intenté usar classList.contains en mi statement de cambio en vano. ¿Hay alguna forma de que pueda funcionar sin cambiar el uso de una statement de cambio?

 function optionClicked(){ switch( this.className ){ case 'option1': alert( 'user clicked option1' ); break; case 'option2': alert( 'user clicked option2' ); break; case 'option3': alert( 'user clicked option3' ); break; } } function optionTabs(){ var optionTabs = document.querySelectorAll( 'div' ), i = 0; for( i; i < optionTabs.length; i++ ){ optionTabs[ i ].addEventListener( 'click', optionClicked ); } } optionTabs(); 
 html { background-color: #eee; font-family: sans-serif; } div { cursor: pointer; margin: 1.1rem; padding: 1rem; background-color: #fff; letter-spacing: 0.05rem; border-radius: 1rem; } div:hover { background-color: #555; color: #eee; } 
 <div class="option1 more">option 1</div> <div class="option2 classes">option 2</div> <div class="option3 here">option 3</div> 

  • Declaración de cambio de Javascript: muy simple, ¿qué estoy haciendo mal?
  • CASO GOTO SWITCH EN JAVASCRIPT
  • performance del conmutador en ECMAscript
  • ¿Cuál es el propósito de las instrucciones boolean switch en JavaScript?
  • Es preferible "si" o "cambiar" Javascript
  • Expresión dentro de la statement de la caja del interruptor
  • Cambie la caja en jquery
  • ¿Es posible usar .contains () en una instrucción switch?
  • 5 Solutions collect form web for “Cómo comprobar className en una sentencia switch cuando un elemento tiene múltiples classs”

    Lo siguiente debería funcionar en su statement de cambio:

     function optionClicked(){ var cls = this.classList; switch( true ){ case cls.contains('option1'): alert( 'option1' ); break; case cls.contains('option2'): alert( 'option2' ); break; case cls.contains('option3'): alert( 'option3' ); break; } } function optionTabs(){ var optionTabs = document.querySelectorAll( 'div' ), i = 0; for( i; i < optionTabs.length; i++ ){ optionTabs[ i ].addEventListener( 'click', optionClicked ); } } optionTabs(); 
     html { background-color: #eee; font-family: sans-serif; } div { cursor: pointer; margin: 1rem; padding: 1rem; background-color: #fff; letter-spacing: 0.05rem; } div:hover { background-color: #555; color: #eee; } 
     <div class="option1 more">option 1</div> <div class="option2 classes">option 2</div> <div class="option3 here">option 3</div> 

    Use un RegExp para extraer classs relevantes de className :

     function optionClicked(){ switch((this.className.match(/\boption\d+\b/) || [])[0]){ case 'option1': alert( 'user clicked option1' ); break; case 'option2': alert( 'user clicked option2' ); break; case 'option3': alert( 'user clicked option3' ); break; } } function optionTabs(){ var optionTabs = document.querySelectorAll( 'div' ), i = 0; for( i; i < optionTabs.length; i++ ){ optionTabs[ i ].addEventListener( 'click', optionClicked ); } } optionTabs(); 
     html { background-color: #eee; font-family: sans-serif; } div { cursor: pointer; margin: 1rem; padding: 1rem; background-color: #fff; letter-spacing: 0.05rem; } div:hover { background-color: #555; color: #eee; } 
     <div class="option1 more">option 1</div> <div class="option2 classes">option 2</div> <div class="option3 here">option 3</div> 

    Debe usar this.classList.contains, que devuelve un valor boolean.

     function optionClicked(){ switch(true){ case this.classList.contains('option1'): alert( 'user clicked option1' ); break; case this.classList.contains('option2'): alert( 'user clicked option2' ); break; case this.classList.contains('option3'): alert( 'user clicked option3' ); break; } } 

    Hice algo un poco diferente a un cambio. Creó una matriz llena de sus opciones y filtró el resultado solo si las classs del elemento coinciden con una opción en la matriz de opciones.

    Tendría que hacer su verificación en el resultado filtrado. La respuesta de Ori es más directa al grano.

     function optionClicked(){ var classes = this.className.split(' '), options = ['option1', 'option2', 'option3']; var clickedOption = classes.filter(function(c) { return options.indexOf(c) >= 0; }); alert(clickedOption) } function optionTabs(){ var optionTabs = document.querySelectorAll( 'div' ), i = 0; for( i; i < optionTabs.length; i++ ){ optionTabs[ i ].addEventListener( 'click', optionClicked ); } } optionTabs(); 
     html { background-color: #eee; font-family: sans-serif; } div { cursor: pointer; margin: 1rem; padding: 1rem; background-color: #fff; letter-spacing: 0.05rem; } div:hover { background-color: #555; color: #eee; } 
     <div class="more option1">option 1</div> <div class="option2 classes">option 2</div> <div class="option3 here">option 3</div> 

    ¡Agregar esto a tu opción, la function de cliquear () debería funcionar!

     function optionClicked(){ let classNames = this.className.split(" ") className = classNames.find( function (val){ return /option\d/.test(val) } ) // switch } 

    Función completa

     function optionClicked(){ let classNames = this.className.split(" ") className = classNames.find( function (val){ return /option\d/.test(val) } ) switch( className ){ case 'option1': alert( 'option1' ); break; case 'option2': alert( 'option2' ); break; case 'option3': alert( 'option3' ); break; } } function optionTabs(){ var optionTabs = document.querySelectorAll( 'div' ), i = 0; for( i; i < optionTabs.length; i++ ){ optionTabs[ i ].addEventListener( 'click', optionClicked ); } } optionTabs(); 
    Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.