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

Posted 2023-03-16

【中文标题】当元素具有多个类时如何在 switch 语句中检查 className

【英文标题】：How to check className in a switch statement when an element has multiple classes

【发布时间】：2018-04-09 12:44:21

【问题描述】：

在下面的示例中，我只希望单击的选项显示在警报中。我正在尝试使用 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>

【问题讨论】：

好吧，你可以试试switch(true) "trick"，并把 classList.contains() 作为 case condition ...

【参考方案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>

【讨论】：

...漂亮！

我解构了 this.classList 以使其更简洁。

【参考方案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>

【参考方案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;
  

【参考方案4】：

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

然后您需要检查过滤后的结果。 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>

【参考方案5】：

将此添加到您的 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();