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

Question

在下面的示例中，我只希望单击的选项显示在警报中。 我正在尝试使用 switch 语句来确定单击了什么 class。 如果我的 div 不包含一个以上的 class，我的示例将起作用。我尝试在我的 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> 

Answer 2

使用RegExp从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> 

Answer 3

你必须使用this.classList.contains，它返回一个布尔值。

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

Answer 4

我做了一些与开关有点不同的事情。 创建一个包含所有选项的数组，并仅在元素的类与options数组中的选项匹配时过滤掉结果。

然后，您需要检查过滤结果。 Ori的答案更为直截了当。

 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> 

Answer 5

classList有一个参数value ，而不是创建一个数组或使用switch(true) ，你可以简单地检查一个字符串的存在：

switch (element.classList.value) {
       case 'new-elem' :
       console.log(1);
          break;
       case 'data-elem':
       console.log(2);
          break;
}

Answer 6

将此添加到您的optionClicked（）函数应该可以正常工作！

function optionClicked(){
  let classNames = this.className.split(" ")

   className = classNames.find(
    function (val){
      return /option\d/.test(val)
    }
   )
// switch
}

全功能

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();

Answer 7

在我看来， switch语句使代码变得混乱，因为您很可能总是在每个 case 之后立即使用 break 语句。

为了不重复自己，您可以为每个 class 名称创建一个处理程序数组（通过用空格拆分classList.value字符串）并检查是否存在每个 class 名称的现有处理程序。

const handlers = {
  'option1': () => alert('User clicked option1'),
  'option2': () => alert('User clicked option2'),
  'option3': () => alert('User clicked option3'),
};
this.className.value.split(/\s+/).forEach(className => handlers[className]?.());

注意：这在逻辑上并不完全等同，但考虑到一个选项的存在排除所有其他选项的存在的可能性，那么这是一种比 go 更清晰、更简洁的方法。