jquery - 单击单选按钮时，将类添加到父级

Question

我有以下代码，当您单击一个单选按钮时，它会添加类 checked_radio ，当您单击另一个单选按钮时，它会删除该类，然后将该类添加到另一个单选按钮。效果很好。

第二部分是我想做类似的事情，但将类 highlighted 添加到父 li 中，它添加得很好，但在单击另一个单选按钮时不会删除该类。我做错了什么？

$('.gfield_radio input').click(function() {
   $('.gfield_radio input').removeClass("checked_radio");
   $(this).addClass("checked_radio");

   $('input.checked_radio').closest('li').removeClass("highlighted");
   $(this).closest('li').addClass('highlighted');   
});

Answer 1

通过这些行，您可以确保之前的任何 .gfield 输入 不再具有 checked_radio，然后将其添加到刚刚单击的输入:

$('.gfield_radio input').removeClass("checked_radio");
$(this).addClass("checked_radio");

但是，完成此操作后，您可以使用它来尝试删除旧的突出显示:

$('input.checked_radio').closest('li').removeClass("highlighted");

当然，到那时，您已经更新了哪个单选按钮具有 checked_radio 类。

只需更改顺序:

$('.gfield_radio input').click(function() {
   // Out with the old...
   $('input.checked_radio').closest('li').removeClass("highlighted");
   $('.gfield_radio input').removeClass("checked_radio");

   // ...and in with the new
   $(this).addClass("checked_radio")
          .closest('li').addClass('highlighted');   
});