当一个元素有多个类时，如何在 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 有点不同的事情。创建了一个包含您的选项的数组，并仅在元素的类与选项数组中的选项匹配时才过滤掉结果。

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

以下应该适用于您的 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 4

您必须使用 this.classList.contains，即 returns 布尔值。

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

Answer 6

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

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

Answer 7

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

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

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]?.());

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

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

How to check className in a switch statement when an element has multiple classes

html

javascript

css

classname

switch-statement

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

How to check className in a switch statement when an element has multiple classes

html

javascript

css

classname

switch-statement

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