Блог

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

CSS:

 .opts {float: left; padding-left: 5px;}
  

HTML:

 <div class="opts"><label><input class="ws" type="radio" name="ptype" value="1">A</label></div>
<div class="opts"><label><input class="ws" type="radio" name="ptype" value="2">B</label></div>
<div class="opts"><label><input class="ws" type="radio" name="ptype" value="3">C</label></div>
  

jQuery

 $(document).ready(function(){
  $('.ws').change(function(){
    var c = this.checked ? '#ff0000' : '#0099ff';
    this.css('color', c);
  });
}); 
  

Я могу заменить «this.css» на $(‘.opts’), но тогда, конечно, весь текст изменит цвет. Моя проблема в том, что я не могу заставить «это» работать. Любая помощь?

Вам нужно изменить цвет ближайшего .opts , как показано ниже.

 $('.ws').change(function() {
    $('.opts').css('color', '#0099ff'); 
    $(this).closest('.opts').css('color', '#ff0000');
});  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="opts"><label><input class="ws" type="radio" name="ptype" value="1">A</label></div>
<div class="opts"><label><input class="ws" type="radio" name="ptype" value="2">B</label></div>
<div class="opts"><label><input class="ws" type="radio" name="ptype" value="3">C</label></div>  

Что вам нужно, так это объект jquery. Что такое $(this) и вам нужно перейти к ближайшему методу:

  $(this).closest('.opts').css('color', c);