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?
- Problema con la statement de cambio de javascript
- es extraño que la condición del interruptor en javascript
- es switch (true) {... javascript válido?
- ¿Puedo usar una sentencia case / switch con dos variables?
- ¿Puedo usar de alguna manera la instrucción if en el interruptor para agregar más casos?
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();