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

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

Вот мой 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>

Answer 3

Вы можете сделать это с помощью 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>

Для получения дополнительной информации об этом "методе", Google "css checkbox hack."

Кроме того, я использовал эмодзи для простоты, но вы также можете использовать content: url('your-url-here').