javascript - 当一个元素有多个类时，如何在 switch 语句中检查 className

Question

在下面的示例中，我只想让单击的选项显示在警报中。我正在尝试使用 switch 语句来确定单击了哪个类。如果我的 div 不包含一个以上的类，我的示例将起作用。我尝试在 switch 语句中使用 classList.contains 但无济于事。有没有一种方法可以在不改变我对 switch 语句的使用的情况下使它正常工作？

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>

Answer 1

以下应在您的 switch 语句中起作用:

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>