0
我遇到了一個將單選按鈕樣式設置爲4選項滑塊的問題。我可以讓它與一個工作，但不能與多個滑塊一起使用。如果我錯過了某些明顯的道歉，請認爲我在這裏盲目地執行代碼。單選按鈕組選擇更改另一個組而不是當前組
當使用多組單選按鈕時，當您單擊第二組，第三組等時，只有第一組保持更改，而不是更改的實際組。
我可以通過對Ids進行硬編碼來修復它，即am-1，am-2等，但這意味着將css寫入固定數量。如果可能的話，我希望儘可能無限制地使用它。
還有其他的CSS，但是這是它的選擇部分：
.switch-four-stage .switch-input:checked + switch-label
{
/* Styling */
font-weight: bold;
color: rgba(255, 255, 255, 1.00);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-ms-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
-webkit-transition-property: color, text-shadow;
-moz-transition-property: color, text-shadow;
-ms-transition-property: color, text-shadow;
-o-transition-property: color, text-shadow;
}
.switch-four-stage .switch-input:checked + .switch-label-am ~ .switch-selection
{
left: 0px;
}
.switch-four-stage .switch-input:checked + .switch-label-all ~ .switch-selection {
left: 60px;
}
.switch-four-stage .switch-input:checked + .switch-label-pm ~ .switch-selection {
left: 120px;
}
.switch-four-stage .switch-input:checked + .switch-label-na ~ .switch-selection {
left: 180px;
}
那麼這樣的標記：
<section style="float: left;">Day 1</section>
<section class="switch-four-stage">
<div class="switch switch-pink">
<input type="radio" class="switch-input" id="am" name="day1" value="1" checked>
<label for="am" class="switch-label switch-label-am">AM</label>
<input type="radio" class="switch-input" id="all" name="day1" value="2">
<label for="all" class="switch-label switch-label-all">ALL</label>
<input type="radio" class="switch-input" id="pm" name="day1" value="3">
<label for="pm" class="switch-label switch-label-pm">PM</label>
<input type="radio" class="switch-input" id="na" name="day1" value="4">
<label for="na" class="switch-label switch-label-na">N/A</label>
<span class="switch-selection"></span>
</div>
</section>
<div style="clear: left;"></div>
<section style="float: left;">Day 2</section>
<section class="switch-four-stage">
<div class="switch switch-pink">
<input type="radio" class="switch-input" id="am" name="day2" value="1" checked>
<label for="am" class="switch-label switch-label-am">AM</label>
<input type="radio" class="switch-input" id="all" name="day2" value="2">
<label for="all" class="switch-label switch-label-all">ALL</label>
<input type="radio" class="switch-input" id="pm" name="day2" value="3">
<label for="pm" class="switch-label switch-label-pm">PM</label>
<input type="radio" class="switch-input" id="na" name="day2" value="4">
<label for="na" class="switch-label switch-label-na">N/A</label>
<span class="switch-selection"></span>
</div>
</section>
<div style="clear: left;"></div>
<section style="float: left;">Day 3</section>
<section class="switch-four-stage">
<div class="switch switch-pink">
<input type="radio" class="switch-input" id="am" name="day3" value="1" checked>
<label for="am" class="switch-label switch-label-am">AM</label>
<input type="radio" class="switch-input" id="all" name="day3" value="2">
<label for="all" class="switch-label switch-label-all">ALL</label>
<input type="radio" class="switch-input" id="pm" name="day3" value="3">
<label for="pm" class="switch-label switch-label-pm">PM</label>
<input type="radio" class="switch-input" id="na" name="day3" value="4">
<label for="na" class="switch-label switch-label-na">N/A</label>
<span class="switch-selection"></span>
</div>
</section>
<div style="clear: left;"></div>
我還包含了輸出的截圖： Multiple slider output
想知道是否有人有任何建議嗎？我希望這是有道理的，如果不是的話，我會盡可能更好地澄清它。
非常感謝提前。
非常感謝James。簡直不敢相信我錯過了新秀miskake（而且我一直在編碼年，總是我通常尋找的第一件哈哈）。我的實際代碼中有很多C＃剃鬚刀混合在一起，所以看不到它的問題。隊友的歡呼聲。 –