Я пытаюсь изменить цвет фона блока, когда нажата радиокнопка, которая находится внутри блока.

Я сделал это, но я не понимаю, почему это не работает. Вот код:

$(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>
<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>

Спасибо

1
BeeLee 31 Авг 2017 в 17:49

4 ответа

Лучший ответ

Как уже упоминалось, кажется, что вы забыли обернуть 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>
1
David Wilkinson 31 Авг 2017 в 15:26

Поместите этот код CSS:

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

С тегом style, например:

<style>
.radio-active {
    background-color: black;
    color: white;
}
</style>
2
Mayank Pandeyz 31 Авг 2017 в 15:03

Я полагаю, вы пропустили теги <style> вокруг вашего класса CSS. Потому что ваш код работает:

$(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>
1
hallleron 31 Авг 2017 в 14:52

Это прекрасно работает здесь ...

Вы правильно звоните в 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>

изображение загружено

0
Bruno Mosciatti G. Maciel 31 Авг 2017 в 14:57