En el siguiente ejemplo, solo quiero que se haga clic en la opción para mostrar en una alerta. Estoy tratando de usar una declaración de cambio para determinar en qué clase se hizo clic. Mi ejemplo funcionaría si mis divs no contuvieran más de una clase. Traté de usar classList.contains en mi declaración de cambio en vano. ¿Hay alguna manera de que esto funcione sin cambiar mi uso de una declaración 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>
4
basement 27 oct. 2017 a las 23:35

5 respuestas

La mejor respuesta

Lo siguiente debería funcionar en su declaración 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>
7
jfeferman 27 oct. 2017 a las 20:56

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

Debería verificar 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>
1
Wild Beard 27 oct. 2017 a las 20:47

¡Agregar esto a su opción OptionClicked () 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();
0
Cristobal Ignacio 27 oct. 2017 a las 21:07

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

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;
  }
}
3
Alan Grosz 27 oct. 2017 a las 20:53

Use un RegExp para extraer clases 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>
4
Ori Drori 27 oct. 2017 a las 20:47