将大量的if else转换为小代码的开关/ case

Question

因为我有很多if else语句用于唯一的id，所以我想将代码更改为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

看看这个小提琴fiddle

您不需要jQuery的一切。

只有结束标记之前该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

正如大家在评论中所说：你无法用开关来解决它。我认为你实际需要的是使用class not id。

相反的：

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

使用：

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

所以你可以用一个if语句对所有的元素

里面的if语句：

$(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不要忘记改变包括将类没有ID