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