Javascript 大于9的数字从顶部开始并保持不变

这段代码由以下人员编写：]

我现在遇到的问题是，如果有9张以上的卡（和开关）不能正常工作，那么10+个开关就不会再触发它旁边的卡。相反，它只是触发了第一张牌

我知道有人问了很多关于“超过9”的问题，但我不知道如何解决它

有人知道答案吗？如果你愿意，可以看看小提琴。

试试这个：

它还可以在edge下运行…

签出

您正在选择

var newSel='#card-'+this.id[6]错误

您的
this.id
具有字符串
“input-11”
和您的代码
this.id[6]
只有字符串的第6个字符，在
“input-11”
中为1（input-11），这就是为什么它禁用第一个div

您可以使用字符
-
创建id，并获取索引
1

this.id.split（'-'）[1]

方法的作用是：将字符串对象按
将字符串拆分为子字符串

这里是一个片段


Array.from（document.querySelectorAll（'[id^=“switch wrapper-“]input[type=checkbox]））.forEach（函数（elem）{
elem.onchange=函数（）{
console.log（this.parentNode）；
this.parentNode.querySelector（'p'）.innerHTML=（this.checked）？'Disabled'：“Visible”；
var newSel='#card-'+this.id.split（'-'）[1]；
document.querySelector（newSel）.classList.toggle（'card-disabled'）；
}
});
/*变量*/
：根{
--白色：#FFFFFF；
--黑色：#000000；
--灰色-200:#EEEEEE；
--灰色-400:#bdbd；
--灰色-50:#FAFAFA；
--黑色透明-800:rgba（0,0,0,0.80）；
--黑色透明-500:rgba（0,0,0,0.54）；
--黑色透明-300:rgba（0,0,0,0.38）；
--黑色透明-100:rgba（0,0,0,0.12）；
--teal-500:#009688；
--teal-transparent-500:rgba（0,150,136,0.5）；
--teal-transparent-light-500:rgba（0,150136,0.2）；
--黄色-500:#FFEB3B；
--teal-700:00796B；
--h1:2.125em；
--文本标题：1.25em；
--描述：0.875em；
--身体：1米；
--按钮阴影：0px 3px 1px-2px rgba（0,0,0,0.2），0px 2px 2px 0px rgba（0,0,0,0.14），0px 1px 5px 0px rgba（0,0,0,0.12）；
--按钮阴影激活：0px 5px 5px-3px rgba（0,0,0,0.2），0px 8px 10px 1px rgba（0,0,0,0.14），0px 3px 14px 2px rgba（0,0,0,0.12）；
--气泡阴影：0.25雷姆0.5雷姆rgba（0,0,0,0.28），0.01.25雷姆rgba（128,128,128,0.1）；
--阴影：0px 2px 4px-1px rgba（0,0,0,0.2），0px 4px 5px 0px rgba（0,0,0,0.14），0px 1px 10px 0px rgba（0,0,0,0.12）；
--容器阴影：0px 7px 8px-4px rgba（0,0,0,0.2），0px 12px 17px 2px rgba（0,0,0,0.14），0px 5px 22px 4px rgba（0,0,0,0.12）；
--过渡：180ms立方贝塞尔（0.4,0.2,1），颜色180ms立方贝塞尔（0.4,0,0.2,1）；
}
.交换机包装器{
边缘底部：41px；
左边距：5px；
}
.交换机包装器p{
显示：内联块；
线高：1.5雷姆；
保证金：0.1.25雷姆0；
垂直对齐：中间对齐；
文本转换：大写；
转换：var（--转换）；
}
.开关包装器.开关{
显示：内联块；
位置：相对位置；
宽度：2.5雷姆；
高度：1公厘；
边界半径：0.5雷姆；
背景：rgba（0,0,0,0.26）；
-webkit转换：var（--转换）；
转换：var（--转换）；
垂直对齐：中间对齐；
光标：指针；
}
.switch wrapper.switch:：before{
内容：''；
位置：绝对位置；
顶部：-0.25雷姆；
左：-0.25雷姆；
宽度：1.5雷姆；
高度：1.5雷姆；
背景：#fafafa；
框阴影：var（--shadow）；
边界半径：50%；
-webkit转换：左var（--转换）、var（--转换、框阴影var（--转换）；
转换：左var（--转换）、var（--转换）、方框阴影var（--转换）；
}
.switch wrapper.switch:active:：before{
框阴影：var（--按钮阴影激活）；
}
.开关包装器输入：选中+.开关{
背景：var（--teal-transparent-500）；
}
.switch包装器输入：选中+.switch:：before{
左：1.25雷姆；
背景：var（--teal-500）；
}
.switch包装器输入：选中+.switch:active:：before{
框阴影：var（--按钮阴影激活）；
}
.卡片小半包装{
浮动：左；
宽度：自动；
}
.卡片小半包装纸.卡片小半包装纸{
宽度：290px；
最小高度：45px；
保证金：20px 10px 20px 0px；
显示：块；
框阴影：var（--shadow）；
边界半径：2px；
转换：var（--转换）；
}
卡片小半包装。卡片小半：第一个孩子{
边缘顶部：10px；
}
.卡片小半包装。卡片小半。动作条{
高度：45px；
显示器：flex；
对齐项目：居中；
填充：0px 10px；
}
.卡片小半包装。卡片小半。动作条a{
显示：内联块；
对齐项目：居中；
文本对齐：右对齐；
}
.卡片小半包装。卡片小半。动作条p{
利润率：0.10px；
字体大小：var（--body）；
文本传输
    Array.from(document.querySelectorAll('[id^="switch-wrapper-"] input[type=checkbox]')).forEach(function(elem){
    elem.onchange=function(){
        this.parentNode.querySelector('p').innerHTML = (this.checked) ? 'Not Visible' : "Visible";
        //when you have more than 9 cards take the number with a regex..
        var newSel = '#card-'+ this.id[6];
        document.querySelector(newSel).classList.toggle('card-disabled');
    }
});
Array.from(document.querySelectorAll('[id^="switch-wrapper-"] input[type=checkbox]')).forEach(function(elem){
    elem.parentNode.querySelector('p').innerHTML = (elem.checked) ? 'Not Visible' : "Visible";
    if (elem.checked)document.querySelector('#card-'+ elem.id[6]).classList.add("card-disabled");
});

var newSel = '#card-'+ this.id.split('-')[1];