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) {&nbsp; var gradeBtnArray = document.getElementsByClassName("grade-btn");&nbsp; for (var i = 0; i < gradeBtnArray.length; i++) {&nbsp; &nbsp; gradeBtnArray[i].children[0].src = pathStr + btnArray[i] + ".png";&nbsp; }&nbsp; gradeBtn.children[0].src = gradeBtn.children[0].src.slice(0, -4) + "Down.png";}

Answer 2

您只需使用 HTML 和 CSS 即可完成此操作。当然，你也可以使用 JS 来完成，但我喜欢这种简单性：#image::after {&nbsp; &nbsp; content: "🤷";&nbsp; &nbsp; font-size: 200px;}#checkButton:checked ~ #image::after {&nbsp; &nbsp; content: "🦠";}#checkButton:checked ~ label {background-color: black;color: white;}#checkButton {position: absolute;opacity: 0;}label {&nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; border: 1px solid black;&nbsp; &nbsp; padding: 5px;}<input type="checkbox" id="checkButton"><label for="checkButton"> label that looks like a button </label>&nbsp; &nbsp;&nbsp;<div id="image"></div>有关此“方法”的更多信息，请谷歌“css checkbox hack”。另外，为了简单起见，我在这里使用了表情符号，但您也可以使用content: url('your-url-here').

Answer 3

这是我的仅 CSS/HTML 方法。如果您需要每个向上和向下箭头不同，您可以为每个单选按钮指定一个 ID 并单独设置它们的样式。[type=radio] {&nbsp;&nbsp; position: absolute;&nbsp; opacity: 0;&nbsp; width: 0;&nbsp; height: 0;}[type=radio] + p {&nbsp; display: inline;}[type=radio] + p::after {&nbsp; cursor: pointer;&nbsp; background-image: url(https://www.pngitem.com/pimgs/m/111-1118943_up-arrow-icon-png-up-arrow-symbol-png.png);&nbsp; background-size: 20px 20px;&nbsp; display: inline-block;&nbsp; width: 20px;&nbsp;&nbsp; height: 20px;&nbsp; content:"";}[type=radio]:checked + p::after {&nbsp; background-image: url(https://www.iconsdb.com/icons/preview/red/down-xxl.png);&nbsp; background-size: 20px 20px;&nbsp; display: inline-block;&nbsp; width: 20px;&nbsp;&nbsp; height: 20px;&nbsp; content:"";}<label>&nbsp; <input type="radio" name="myRadio" value="1" checked> <p></p></label><label>&nbsp; <input type="radio" name="myRadio" value="2"> <p></p></label><label>&nbsp; <input type="radio" name="myRadio" value="3"> <p></p></label><label>&nbsp; <input type="radio" name="myRadio" value="4"> <p></p></label><label>&nbsp; <input type="radio" name="myRadio" value="4"> <p></p></label>