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;    }  }}

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 checkbox hack”。

另外，为了简单起见，我在这里使用了表情符号，但您也可以使用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>