JS - 带图像的单选按钮

Question

我讨厌在编程世界里是一个新手...我要出去遛狗，同时寻求帮助。

我有五张要用作按钮“上”状态的图片，以及五张用作它们的“下”状态。我只想做到当点击一个按钮时，所有图片都改回其“上”状态，而我选择的那个则变为“下”状态。很简单对吧。但是当我尝试访问图像名称并将其与下方的图像交换时，我就迷失了。我已经做到了这一点，但我使用了两个大的switch语句放在if语句里。太长了，我知道我可以做得更好。

有人能告诉我正确的方向吗？你甚至可以给我提示，让我自己解决问题，让我变得更强壮:)

谢谢

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

- user2957919

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

- Daemon Beast

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')来实现相同的效果。

- ultraGentle

---

谢谢！我尝试了一下这个方法，并在YouTube上找到了一个视频。原始的up state图片应该放在哪里？是在CSS文件中的URL内容还是需要将其插入HTML文件中？ - user2957919

@user2957919 在CSS文件中，URL将放在“content”之后。第二张图片将放在“[checked]”块中。 - ultraGentle

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>

- DenverCoder1