我討厭成為編碼世界中的菜鳥……我要出去遛狗，同時(shí)尋求一些幫助。我有五個(gè)圖像將用作按鈕“向上”狀態(tài)，以及五個(gè)圖像用作按鈕“向下”狀態(tài)。我想要做的就是，當(dāng)單擊一個(gè)按鈕時(shí)，所有圖像都會(huì)變回向上狀態(tài)，而我選擇的圖像會(huì)變?yōu)橄蛳聽顟B(tài)。簡(jiǎn)單就對(duì)了。當(dāng)我嘗試訪問(wèn)圖像名稱然后將其與向下的圖像切換時(shí)，我迷路了。我得到了這個(gè)工作，但我在 if 語(yǔ)句中使用了兩個(gè)巨大的 switch 語(yǔ)句。太長(zhǎng)了，我知道我可以做得更好。有人能指出我正確的方向嗎？你甚至可以給我一些提示，讓我自己弄清楚并讓我變得更堅(jiān)強(qiáng):)謝謝var pathStr = "images/lessons/lessonBtns/";var btnArray = ["kBtn", "firstBtn", "secondBtn", "thirdBtn", "fourthBtn"];function toggleGradeBtns(gradeBtn) { var gradeBtnArray = document.getElementsByClassName("grade-btn"); console.log(gradeBtnArray); for (var i = 0; i < gradeBtnArray.length; i++) { gradeBtnArray[i].children[0].src = "images/lessons/lessonBtns/" + btnArray[i] + ".png"; gradeBtnArray[i].dataset.checked = 0; } if (gradeBtn.dataset.checked == 0) { gradeBtn.dataset.checked = 1; console.log(gradeBtn.children[0].src); switch (gradeBtn.children[0].src) { case pathStr + "kBtn.png": gradeBtn.children[0].src = pathStr + "kBtnDown.png"; break; case pathStr + "firstBtn.png": gradeBtn.children[0].src = pathStr + "firstBtnDown.png"; break; case pathStr + "secondBtn.png": gradeBtn.children[0].src = pathStr + "secondBtnDown.png"; break; case pathStr + "thirdBtn.png": gradeBtn.children[0].src = pathStr + "thirdBtnDown.png"; break; case pathStr + "fourthBtn.png": gradeBtn.children[0].src = pathStr + "fourthBtnDown.png"; break; } } else { gradeBtn.dataset.checked = 0; switch (gradeBtn.children[0].src) { case pathStr + "kBtn.png": gradeBtn.children[0].src = pathStr + "kBtn.png"; break; case pathStr + "firstBtn.png": gradeBtn.children[0].src = pathStr + "firstBtn.png"; break; case pathStr + "secondBtn.png": gradeBtn.children[0].src = pathStr + "secondBtn.png"; break; } }}
3 回答
慕虎7371278
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超4個(gè)贊
我刪除了許多無(wú)用的 JavaScript，并更改了單擊按鈕的激活方式。為了簡(jiǎn)潔起見我也刪除了console.log。
var pathStr = "images/lessons/lessonBtns/";
var btnArray = ["kBtn", "firstBtn", "secondBtn", "thirdBtn", "fourthBtn"];
function toggleGradeBtns(gradeBtn) {
var gradeBtnArray = document.getElementsByClassName("grade-btn");
for (var i = 0; i < gradeBtnArray.length; i++) {
gradeBtnArray[i].children[0].src = pathStr + btnArray[i] + ".png";
}
gradeBtn.children[0].src = gradeBtn.children[0].src.slice(0, -4) + "Down.png";
}
開心每一天1111
TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超13個(gè)贊
您只需使用 HTML 和 CSS 即可完成此操作。當(dāng)然，你也可以使用 JS 來(lái)完成，但我喜歡這種簡(jiǎn)單性：
#image::after {
content: "??";
font-size: 200px;
}
#checkButton:checked ~ #image::after {
content: "??";
}
#checkButton:checked ~ label {
background-color: black;
color: white;
}
#checkButton {
position: absolute;
opacity: 0;
}
label {
border-radius: 10px;
border: 1px solid black;
padding: 5px;
}
<input type="checkbox" id="checkButton">
<label for="checkButton"> label that looks like a button </label>
<div id="image"></div>
有關(guān)此“方法”的更多信息，請(qǐng)谷歌“css checkbox hack”。
另外，為了簡(jiǎn)單起見，我在這里使用了表情符號(hào)，但您也可以使用content: url('your-url-here').
慕斯709654
TA貢獻(xiàn)1840條經(jīng)驗(yàn) 獲得超5個(gè)贊
這是我的僅 CSS/HTML 方法。如果您需要每個(gè)向上和向下箭頭不同，您可以為每個(gè)單選按鈕指定一個(gè) ID 并單獨(dú)設(shè)置它們的樣式。
[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
[type=radio] + p {
display: inline;
}
[type=radio] + p::after {
cursor: pointer;
background-image: url(https://www.pngitem.com/pimgs/m/111-1118943_up-arrow-icon-png-up-arrow-symbol-png.png);
background-size: 20px 20px;
display: inline-block;
width: 20px;
height: 20px;
content:"";
}
[type=radio]:checked + p::after {
background-image: url(https://www.iconsdb.com/icons/preview/red/down-xxl.png);
background-size: 20px 20px;
display: inline-block;
width: 20px;
height: 20px;
content:"";
}
<label>
<input type="radio" name="myRadio" value="1" checked> <p></p>
</label>
<label>
<input type="radio" name="myRadio" value="2"> <p></p>
</label>
<label>
<input type="radio" name="myRadio" value="3"> <p></p>
</label>
<label>
<input type="radio" name="myRadio" value="4"> <p></p>
</label>
<label>
<input type="radio" name="myRadio" value="4"> <p></p>
</label>
- 3 回答
- 0 關(guān)注
- 179 瀏覽
添加回答
舉報(bào)
0/150
提交
取消