大量のifelsを小文字のswitch/caseに変換する

Question

一意のIDのためにif else文がたくさんあるので、コードをswitch/caseに変更したいと思います。スイッチでいくつかの研究をした後、私は今少しそれを理解しています。私はスイッチにこの機能を変更する必要がありますどのように取得することはできませんが：

window.onload = function() { 
    function check() { 
     if (document.querySelector('#switch-wrapper-1 input').checked) { 
      document.querySelector('#switch-wrapper-1 p').textContent = "Disabled"; 
      $('#card-1').addClass('card-disabled'); 
     } else { 
      document.querySelector('#switch-wrapper-1 p').textContent = "Visible"; 
      $('#card-1').removeClass('card-disabled'); 
     } 

     if (document.querySelector('#switch-wrapper-2 input').checked) { 
      document.querySelector('#switch-wrapper-2 p').textContent = "Disabled"; 
      $('#card-2').addClass('card-disabled'); 
     } else { 
      document.querySelector('#switch-wrapper-2 p').textContent = "Visible"; 
      $('#card-2').removeClass('card-disabled'); 
     } 

     if (document.querySelector('#switch-wrapper-3 input').checked) { 
      document.querySelector('#switch-wrapper-3 p').textContent = "Disabled"; 
      $('#card-3').addClass('card-disabled'); 
     } else { 
      document.querySelector('#switch-wrapper-3 p').textContent = "Visible"; 
      $('#card-3').removeClass('card-disabled'); 
     } 
    } 
    document.getElementById('input-1').onchange = check; 
    document.getElementById('input-2').onchange = check; 
    document.getElementById('input-3').onchange = check; 
    check(); 
} 

私は一種のこれがそうあなたは私が欲しいものをよりよく理解して行う方法について私の想像を表示しようとします：

window.onload = function(){ 
    function check(){ 
     var switchWrapper = document.querySelector('.switch-wrapper input').checked; // Overall class for all inputs 
     switch(scenario){ 
      case 0: 
      document.getElementById("switch-wrapper-1 input").textContent = "Disabled"; 
      break; 

      case 1: 
      document.getElementById("switch-wrapper-2 input").textContent = "Disabled"; 
      break; 

      case 2: 
      document.getElementById("switch-wrapper-3 input").textContent = "Disabled"; 
      break; 

      default: 
      document.getElementsByClassname("switch-wrapper input").textContent = "Enabled"; 
     } 
    } 
    document.getElementById('switch-wrapper-1 input').onchange = check; 
    document.getElementById('switch-wrapper-2 input').onchange = check; 
    document.getElementById('switch-wrapper-3 input').onchange = check; 
    check(); 
} 

これは、それがどのように動作するかを間違いないが、誰かがそれを修正するか、それは素晴らしい

だろう働く何かを作ることができれば、私はhttps://jsfiddle.net/4heoz0nd/

ここでフィドルを作りました

Answer 1

ルックになるように含まれ、すべてを変更することを忘れないでください。終了bodyタグの前に

これだけlttleスクリプトは：

 Array.from(document.querySelectorAll('[id^="switch-wrapper-"] input[type=checkbox]')).forEach(function(elem){ 
      elem.onchange=function(){ 
       this.parentNode.querySelector('p').innerHTML = (this.checked) ? 'Disabled' : "Visible"; 
       //when you have mor than 9 cards take the number with an regex.. 
       var newSel = '#card-'+ this.id[6]; 
       document.querySelector(newSel).classList.toggle('card-disabled'); 
      } 
     }); 

Answer 2

誰もがコメントしたとおり、スイッチでは解決できません。あなたが実際に必要と思うのは、IDでないクラスを使うことです。

の代わりに：

document.querySelector('#switch-wrapper-3 input').checked 

使用：

document.querySelector('.switch-wrapper input').checked 

ので、あなたのIF文の使用インサイドすべての要素

ためにif文1を使用することができます。

$(this) 

rを現在の要素に置き換えます。私はしばらくの間でjQueryを使って働いていないが、私はそれのようなものだと思う：私はセレクタを使用する方法について間違っているかもしれない

function check() { 
    if (document.querySelector('.switch-wrapper input').checked) { 
     $(this 'p').textContent = "Disabled"; 
     $(this '.card').addClass('card-disabled'); 
    } else { 
     $(this 'p').textContent = "Visible"; 
     $(this 'card').removeClass('card-disabled'); 
    } 
} 

が、私はあなたのアイデアを取得し、それを書くための正しい方法を見つけることができると思います。

PSは、このフィドルfiddle

あなたは何のjQueryを必要としないで、クラスではないID