我討厭成為編碼世界中的菜鳥……我要出去遛狗，同時尋求一些幫助。我有五個圖像將用作按鈕“向上”狀態，以及五個圖像用作按鈕“向下”狀態。我想要做的就是，當單擊一個按鈕時，所有圖像都會變回向上狀態，而我選擇的圖像會變為向下狀態。簡單就對了。當我嘗試訪問圖像名稱然后將其與向下的圖像切換時，我迷路了。我得到了這個工作，但我在 if 語句中使用了兩個巨大的 switch 語句。太長了，我知道我可以做得更好。有人能指出我正確的方向嗎？你甚至可以給我一些提示，讓我自己弄清楚并讓我變得更堅強:)謝謝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貢獻1802條經驗 獲得超4個贊
我刪除了許多無用的 JavaScript，并更改了單擊按鈕的激活方式。為了簡潔起見我也刪除了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貢獻1836條經驗 獲得超13個贊
您只需使用 HTML 和 CSS 即可完成此操作。當然，你也可以使用 JS 來完成，但我喜歡這種簡單性：
#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>
有關此“方法”的更多信息，請谷歌“css checkbox hack”。
另外，為了簡單起見，我在這里使用了表情符號，但您也可以使用content: url('your-url-here').
慕斯709654
TA貢獻1840條經驗 獲得超5個贊
這是我的僅 CSS/HTML 方法。如果您需要每個向上和向下箭頭不同，您可以為每個單選按鈕指定一個 ID 并單獨設置它們的樣式。
[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 關注
- 164 瀏覽
添加回答
舉報
0/150
提交
取消