根据无线电输入值将类添加到目标（切换，类似功能）

Question

总结答案

如果您在此处遇到类似情况，答案很简单：

在我的代码中，我得到了 :checked 无线电输入的 .val() 值，它获取了所有已检查的无线电的值，这会导致不需要的类。利用 .click 回调，我们可以获得被点击项目的特定输入值的 .val() 值，在我的例子中是一个单选标签。

这是我遇到的问题的另一个很好的解决方案.. Add class and remove class based on checked radio? 和该解决方案的 jsbin http://jsbin.com/ugufi/27/

希望这对可能遇到相同问题的其他人有所帮助...非常简单的答案..谢谢大家！

问题

这是我的代码

http://jsbin.com/ugufi/11/

我正在努力寻找一个解决方案，在将类添加到目标后删除它。

我有一个单选按钮列表，我正在获取 :checked 单选输入的值并将该值放入一个类中。

当一个新的收音机被选中时，它会不断添加到类中

    <div class="radio1 radio2 radio3 radio4"></div>

我需要什么（我知道很简单，但我不确定要使用什么）。

   <div class="radio1"></div><!-- Radio input value with radio1 is checked -->

然后当我检查新的无线电输入时

    <div class="radio4"></div><!-- Radio input value with radio4 is checked -->

PS。我查看了这个问题并找到了很多答案，但它们都使用某种 .siblings() 或 .parent() 回调，它们是很好的解决方案，但是在我的代码中输入和目标彼此相距甚远。

Answer 1

将我的答案更改为更完整：

$('.moon-generator-attr').click(function() {
  var tabid = $(this).val();

  $('.icon-wrap a.icon').attr('class','icon icon-'+tabid);
  alert($('.icon-wrap a.icon').attr('class'));
});

这将使课程图标和您想要的任何第二课程。这样你仍然可以使用$('.icon-wrap .icon')访问元素

如果您的 .icon-wrap div 中只有一个“a”，您也可以这样做：

$('.moon-generator-attr').click(function() {
  var tabid = $(this).val();

  $('.icon-wrap a').attr('class','icon-'+tabid);
  alert($('.icon-wrap a').attr('class'));
});

Answer 2

删除旧类 + 添加新类

$(this).removeClass().addClass('icon-'+tabid+''); 

完整代码：

$('.moon-generator-attr').click(function() {
    var tabid = $('.moon-generator-attr:checked').val();

    $(this).removeClass().addClass('icon-'+tabid+''); 

      alert($('.icon-wrap a.icon').attr("class"));


});