Question

所以我之前刚刚用jQuery问过同样的问题，知道客户端不想在他的项目中使用jQuery。

因此，当单击块内部的单选按钮时，我希望更改块的背景颜色。只有纯Javascript请。

以下是我仍然不知道为什么它不起作用的代码。

<style>
  .radio-active {
    background-color: $primaryColor;
    color: $whiteColor;
  }
</style>

<ul>
  <li id="label">
    <input id="rad" type="radio" name="rad" onclick="changeColor()">
    <label class="radio-label" for="f-option">£25</label>
  </li>
</ul>

<script>
  function changeColor() {
    document.getElementById('label').className += "radio-active";
    console.log('hiiiiiiiii');
  }

  function init() {
    document.getElementById("rad").onclick = changeColor;
  }

  window.onload = init();
</script>

Answer 1

您追加到class属性，点击两次后，它变为：

radio-activeradio-active

相反，您可以切换 classList - 请参阅下面的演示：

请注意，我在这里使用的是checkbox，因为它更适合此处的任务。

function changeColor() {
  document.getElementById('label').classList.toggle("radio-active");
}

function init() {
  document.getElementById("rad").onclick = changeColor;
}

window.onload = init();

.radio-active {
  background-color: lightblue;
  color: white;
}

<ul>
  <li id="label">
    <input id="rad" type="checkbox" name="rad" onclick="changeColor()">
    <label class="radio-label" for="f-option">£25</label>
  </li>
</ul>

Answer 2

在呈现元素之前，init函数可能正在运行，因为您正在调用该函数而不是仅将其指定为window.onload的回调。

因此window.onload = init();应该成为window.onload = init;

编辑：也可能是您的CSS失败（无声），因为颜色变量（如$primaryColor）未在任何地方声明。尝试使用常规颜色，例如red，blue。

由于其他原因，这些样式可能不可见。尝试使用更极端的样式规则，例如display: none;。

另外，与kukkuz所说的一样，添加课程（className += "radio-active"）应该只使用=而不是+=，或使用他们的方法（如果你想要来回切换。）

Answer 3

您可以像这样简化代码：

function changeColor() {
  document.getElementById('label').className += "radio-active";
}

.radio-active {
  background-color: black;
  color: white;
}

<ul>
  <li id="label">
    <input id="rad" type="radio" name="rad" onclick="changeColor()">
    <label class="radio-label" for="f-option">£25</label>
  </li>
</ul>

如果你只想使用JS而不想使用CSS，你可以这样设置cssString：

function changeColor() {
  var cssString = 'background-color: black; color: white;'
  document.getElementById("label").style.cssText = cssString;
}

<ul>
  <li id="label">
    <input id="rad" type="radio" name="rad" onclick="changeColor()">
    <label class="radio-label" for="f-option">£25</label>
  </li>
</ul>

Answer 4

<style>
  .radio-active {
    background-color: red;
    color: white;
  }
</style>

<ul>
  <li id="my_label">
    <input id="rad" type="radio" name="rad" onclick="changeColor()">
    <label class="radio-label" for="f-option">£25</label>
  </li>
</ul>

<script>
  var changeColor = function() {
     document.getElementById("my_label").classList.add("radio-active");
  }

</script>

点击收音机改变背景颜色只有纯JS请

4 个答案: