Изменение класса элемента с помощью JQuery

Я создаю здесь несколько элементов div:

 $.each(obj.teams, function(d, t) {
              count+=1;
              team = "";
              replay_teams+= '<div class = "rgtside" id = "team'+count+'">';
              ...

Как мы видим на этом рисунке, мои div генерируются, как задумано, с хорошими идентификаторами:

Изменение класса элемента с помощью JQuery

Кроме того, у меня есть несколько радиокнопок (cb ..), и я дал ему функцию изменения, в которой я пытаюсь изменить класс своего div в соответствии с выбранной радиокнопкой.

 //loop over some stuffs to generate the radio...
 $("#cb"+id) // select the radio by its id
    .change(function(){ // bind a function to the change event
        if ( $(this).is(":checked") ){ // check if the radio is checked
        selectedWinner = $(this).val(); // retrieve the value
        console.info("new value : "+selectedWinner)
        var i;
        for (i = 1; i < array.length+1; i++) { 
          $("#team"+i).attr('class','rgtside'); //reset all div with the normal class
        }
        $("#team"+selectedWinner).attr('class','rgtside win'); //assign the good class to the winner   
    }
 });

Моя функция работает, так как я получаю сообщение на консоли каждый раз, когда меняю выбранное значение радиокнопок.

Похоже, эта строка кода не работает: $("#team"+selectedWinner).attr('class','rgtside win'); поскольку я не могу заменить класс rgtside на rgtside победа ...

Похоже, он не может найти мой элемент div, но идентификатор правильный?

Пожалуйста, опубликуйте весь код, который может воспроизвести проблему.

Sébastien 23.04.2018 23:03

извините, код был слишком сложным, чтобы его можно было описать в нескольких строках кода

rilent 24.04.2018 00:29
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
51
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Попробуйте этот код, посмотрите, поможет ли:

$("#td_id").toggleClass('rgtside win');
Ответ принят как подходящий

Используйте методы addClass(), removeClass() и toggleClass() вместо attr(). Кстати, нет необходимости включать класс .rgtside, если он всегда в каждом div, потому что эти методы jQuery только добавляют / удаляют указанные классы, они не перезаписывают атрибут class, как это делает свойство className.

Демо

$(':radio').change(function() {
  var selectedWinner = $(this).val();
  $('.rgtside').removeClass('win');
  if ($(this).is(":checked")) {
    $("#team" + selectedWinner).addClass('win');
  } else {
    $("#team" + selectedWinner).removeClass('win');
  }
});

//OR

/*
$(':radio').on('click', function() {
  var selectedWinner = $(this).val();
  $('.rgtside').removeClass('win');
  $('#team'+selectedWinner).toggleClass('win');
});
*/
.win {
  outline: 5px solid red
}
<input type='radio' name='rad' value='0'> 0
<input type='radio' name='rad' value='1'> 1
<input type='radio' name='rad' value='2'> 2

<div id='team0' class='rgtside'>team 0</div>
<div id='team1' class='rgtside'>team 1</div>
<div id='team2' class='rgtside'>team 2</div>





<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Нет проблем, удачного кодирования.

zer00ne 24.04.2018 00:30

Другие вопросы по теме