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

这是无线电输入的描述。你不需要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");
}

我在CodePen上为你做了demo。

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

1 个答案: