这段代码由@frank-wisniewski撰写：]
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");
});
https://jsfiddle.net/e5brLhyy/3/
我现在遇到的问题是，如果有超过9张卡（和开关），它不再正常工作，10 +开关不会触发它的下一张卡到了。相反，它只会触发第一张卡片。
我知道有很多关于某些事情的问题超过9＆＃39;但我不明白如何解决它
有人知道答案吗？如果你愿意，可以看看小提琴。
答案 0 :(得分：1)
结帐fiddle
您选择var newSel = '#card-'+ this.id[6];错误
this.id字符串"input-11"和您的代码this.id[6];只有字符串的第6个字符（{ - strong> 1 1）{{1} 1}}这就是它禁用第一个div的原因。
您可以split使用字符"input-11"的ID并获取索引-
1
split（）方法将String对象拆分为字符串数组 将字符串分成子串。
这是一个代码段
this.id.split('-')[1];Array.from(document.querySelectorAll('[id^="switch-wrapper-"] input[type=checkbox]')).forEach(function(elem) {
elem.onchange = function() {
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');
}
}); /*Variables*/
:root {
--white: #FFFFFF;
--black: #000000;
--grey-200: #EEEEEE;
--grey-400: #BDBDBD;
--grey-50: #FAFAFA;
--black-transparent-800: rgba(0, 0, 0, 0.80);
--black-transparent-500: rgba(0, 0, 0, 0.54);
--black-transparent-300: rgba(0, 0, 0, 0.38);
--black-transparent-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, 150, 136, 0.2);
--yellow-500: #FFEB3B;
--teal-700: #00796B;
--h1: 2.125em;
--text-title: 1.25em;
--caption: 0.875em;
--body: 1em;
--button-shadow: 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);
--button-shadow-active: 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);
--bubble-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28), 0 0 0 1.25rem rgba(128, 128, 128, 0.1);
--shadow: 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);
--container-shadow: 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);
--transition: 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.switch-wrapper {
margin-bottom: 41px;
margin-left: 5px;
}
.switch-wrapper p {
display: inline-block;
line-height: 1.5rem;
margin: 0 1.25rem 0;
vertical-align: middle;
text-transform: uppercase;
transition: var(--transition);
}
.switch-wrapper .switch {
display: inline-block;
position: relative;
width: 2.5rem;
height: 1rem;
border-radius: 0.5rem;
background: rgba(0, 0, 0, 0.26);
-webkit-transition: var(--transition);
transition: var(--transition);
vertical-align: middle;
cursor: pointer;
}
.switch-wrapper .switch::before {
content: '';
position: absolute;
top: -0.25rem;
left: -0.25rem;
width: 1.5rem;
height: 1.5rem;
background: #fafafa;
box-shadow: var(--shadow);
border-radius: 50%;
-webkit-transition: left var(--transition), var(--transition), box-shadow var(--transition);
transition: left var(--transition), var(--transition), box-shadow var(--transition);
}
.switch-wrapper .switch:active::before {
box-shadow: var(--button-shadow-active);
}
.switch-wrapper input:checked + .switch {
background: var(--teal-transparent-500);
}
.switch-wrapper input:checked + .switch::before {
left: 1.25rem;
background: var(--teal-500);
}
.switch-wrapper input:checked + .switch:active::before {
box-shadow: var(--button-shadow-active);
}
.card-small-half-wrapper {
float: left;
width: auto;
}
.card-small-half-wrapper .card-small-half {
width: 290px;
min-height: 45px;
margin: 20px 10px 20px 0px;
display: block;
box-shadow: var(--shadow);
border-radius: 2px;
transition: var(--transition);
}
.card-small-half-wrapper .card-small-half:first-child {
margin-top: 10px;
}
.card-small-half-wrapper .card-small-half .action-bar {
height: 45px;
display: flex;
align-items: center;
padding: 0px 10px;
}
.card-small-half-wrapper .card-small-half .action-bar a {
display: inline-block;
align-items: center;
text-align: right;
}
.card-small-half-wrapper .card-small-half .action-bar p {
margin: 0 10px;
font-size: var(--body);
text-transform: uppercase;
width: 100%;
}
.card-small-half-wrapper .card-small-half .action-bar .material-icons {
margin: 0 10px;
padding: 4px 0;
}
.options-card {
float: left;
width: 250px;
height: auto;
padding: 11px 20px;
box-shadow: var(--shadow);
margin: 10px 0px 10px 10px;
min-height: 446px;
border-radius: 2px;
}
.card-disabled {
opacity: 0.3;
pointer-events: none;
}
.display-none {
display: none;
}
.material-icons {
opacity: 0.54;
}
答案 1 :(得分：0)