使用JQuery更改元素的类

Question

我在这里生成一些div元素：

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

正如我们在这张图片中看到的那样，我的div是按照预期生成的，具有良好的ID：

另外，我有一些radiobuttons（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.log("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 win 替换 rgtside 类......

看起来它找不到我的div元素，但id是正确的吗？

Answer 1

使用 addClass() ， removeClass() 和 toggleClass() 方法代替{{1} }。顺便说一句，如果它始终在每个div上，则不需要包含attr()类，因为这些jQuery方法只添加/删除指定的类，它们不会覆盖.rgtside属性，如class属性。

演示

＆＃13;

＆＃13;

className

＆＃13;

$(':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');
});
*/

＆＃13;

.win {
  outline: 5px solid red
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这段代码，看看是否有帮助：

$("#td_id").toggleClass('rgtside win');