javascript - 使用 JavaScript 更新背景图像时的不一致行为

Question

我有 5 个带有背景图像的按钮。在更改“button1”上的图像之前，我要确保所有其他按钮都恢复到其原始状态。之后，我将“button1”更改为新图像(我不确定这是否是执行此操作的最佳方法)。

我访问该页面的次数大约有一半是按预期工作的。其他时候，'button1' 没有设置并保持不变。为什么每次都不一样？如何使行为保持一致？

document.getElementById("button2").style.backgroundImage = "url('Images/buttonUnClicked.png')";
document.getElementById("button3").style.backgroundImage = "url('Images/buttonUnClicked.png')";
document.getElementById("button4").style.backgroundImage = "url('Images/buttonUnClicked.png')";
document.getElementById("button5").style.backgroundImage = "url('Images/buttonUnClicked.png')";

document.getElementById("button1").style.backgroundImage = "url('Images/buttonClicked.png')";

Answer 1

这是 radio 输入的描述。你不需要 JavaScript。
诀窍是为单选按钮设置标签样式并隐藏按钮本身。

HTML:

<form>
  <ul>
    <li>
      <input type="radio" class="button" name="button" id="button1"/>
      <label for="button1"></label>
    </li>
  </ul>
</form>  

(添加任意数量的按钮)

CSS:

ul {
  list-style: none;
}

.button {
  visibility:hidden;
  clip:rect(0 0 0 0);
  position: absolute;
  left: 9999px;
}

label {
  background-image: url("Images/buttonUnClicked.png");
  background-size: 100px;
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
  display: block;
}

.button:checked + label {
  background-image: url("Images/buttonClicked.png");
}

我做了这个demo在 CodePen 上为您服务。