Question

点击块内部的单选按钮时，我试图更改块的背景颜色。

我这样做但我不明白为什么它不起作用。这是代码：

＆＃13;

$(document).ready(function() {
    $('#rad').click(function() {
        $('#label').addClass('radio-active');
    });
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="radio-item" id="label">
      <input id="rad" type="radio" name="rad" >
      <label class="radio-label"for="f-option">£25</label>
  </li>
</ul>

＆＃13;

THX

Answer 1

把这个css代码：

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

使用style标记，如：

<style>
.radio-active {
    background-color: black;
    color: white;
}
</style>

Answer 2

我猜你错过了CSS类的<style>标签。因为您的代码正在运行：

$(document).ready(function() {
  $('#rad').click(function() {
    $('#label').addClass('radio-active');
  });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="radio-item" id="label">
    <input id="rad" type="radio" name="rad" >
    <label class="radio-label"for="f-option">£25</label>
</li>

Answer 3

正如其他人所提到的，听起来好像你可能忘记将CSS包装在<style>标签中。

我已经将你的jQuery重写为vanilla JS - 因为这是一个你想要实现的相对简单的任务，为什么不去香草呢？： - ）

document.querySelector("#rad").addEventListener("change", function() {
    var label = document.getElementById("label");
    label.classList.add("radio-active");
});

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

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

Answer 4

这完全适用于此......

您是否正确调用了jQuery？

<style>
.radio-active {
    background-color: black;
    color: white;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
    $('#rad').click(function() {
        $('#label').addClass('radio-active');
    });
});
</script>

<ul>


<li class="radio-item" id="label">
    <input id="rad" type="radio" name="rad" >
    <label class="radio-label"for="f-option">£25</label>
</li>

<li class="2radio-item" id="label2">
    <input id="rad2" type="radio" name="rad2" >
    <label class="radio-label2"for="f-option2">£35</label>
</li>

</ul>

image uploaded

单击无线电时更改背景颜色

4 个答案: