JS-带图像的单选按钮

Question

我讨厌成为编码世界的一个角落。。。。我要出去遛狗，同时寻求帮助。

我有五个图像将被用作按钮的"向上"状态，还有五个图像被用作它们的"向下"状态。我想做的就是当点击一个按钮时，所有图像都会变回它们的向上状态，而我选择的图像会变回向下状态。很简单。当我试图访问图像名称，然后让它与向下的图像切换时，我会迷路。我做到了，但我在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;
case pathStr + "thirdBtn.png":
gradeBtn.children[0].src = pathStr + "thirdBtn.png";
break;
case pathStr + "fourthBtn.png":
gradeBtn.children[0].src = pathStr + "fourthBtn.png";
break;
}
}
}

Answer 1

我删除了许多无用的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";
}

Answer 2

您只需使用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复选框破解">

此外，为了简单起见，我在这里使用了表情符号，但您也可以使用content: url('your-url-here')。

Answer 3

以下是我的仅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>