Javascript 将大量if ELSE转换为交换机/机箱以获得较小的代码

因为我有很多关于唯一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();
}

这肯定不是它应该如何工作，但如果有人能纠正它或使一些工作，这将是伟大的

我在这里做了一把小提琴看这把小提琴

您不需要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');
            }
        });

---

是否只允许选中一个选项或允许任何数字？看起来有三种不同的if-else条件。所以我想如果其他条件允许的话可以使用。要使用switch案例，应该有一个if-else阶梯。Tbh如果我正确理解你的想法，我认为用switch重写它不会更好。如果您对单个值进行了切换，则更合适，但在代码中，它将类似于案例cond1&&cond2；案例1&！cond2；案例第1条和第2条；等等，这将导致一个非常混乱的代码。所有的数字都允许被检查，我还应该提到，它们都应该单独工作。如果这些是广播框，那么它们必须使用if/else语句，您只能对复选框使用switch！真令人印象深刻！对你的回答我感激不尽！正确答案！我能再问你一件事吗？如果在加载之前已经选中了一个复选框，比如：javascript没有对此做出反应，我如何才能使其工作？我尝试使用window.onload，但不起作用您必须初始化<代码>数组.from（document.queryselectoral（'[id^=“switch wrapper-”]input[type=checkbox]'））.forEach（function（elem）{elem.parentNode.querySelector（'p'）.innerHTML=（elem.checked）？'Disabled'：“Visible”；console.log（elem.id[6]）；if（elem.checked）document.querySelector（'#card-'+elem.id[6]）。classList.add（“card Disabled”））;是！再次感谢，现在我不再打扰你了：“）没问题……我们是乡下邻居；-）