要素に複数のクラスがある場合のswitch文のclassNameの確認方法

Question

以下の例では、アラートに表示するオプションをクリックします。私はどのクラスがクリックされたかを判断するためにswitch文を使用しようとしています。私のdivは、それぞれが複数のクラスを含んでいない場合、私の例は動作します。私はスイッチのステートメントで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文で動作するはずです：

あなたはブール値を返すこと、this.classList.containsを使用する必要が

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

私はスイッチよりも少し違う何かをしました。オプションの完全な配列を作成し、要素のクラスがoptions配列のオプションと一致する場合にのみ結果をフィルタリングします。

フィルタリングされた結果を確認する必要があります。オライの答えはより真実です。

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 3

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 4

。

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