根据无线电输入值将类添加到目标(切换，类似于函数) [英] Add class to target based on radio input value (toggle, like function)

问题描述

如果您遇到类似的问题，这里是简单的答案:

在我的代码中，我得到了:checked单选输入的.val()值，该值获得了已检查的所有单选的值，这导致了不需要的类.利用.click回调，我们可以获得只是被单击项的特定输入值的.val()值，在我的情况下，这是一个单选标签.

In my code I get the .val() value of the :checked radio input, that gets the value of all the radios that have been checked, this results in unwanted classes. Taking advantage of the .click callback we can get the .val() value of just the specific input value of the clicked item, which is a radio label in my case.

这是解决我遇到的问题的另一种好方法.根据已检查的无线电添加类并删除类吗?和jsbin到此解决方案 http://jsbin.com/ugufi/27/

Here is another great solution to the problem I had.. Add class and remove class based on checked radio? and the jsbin to this solution http://jsbin.com/ugufi/27/

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

Hope this helps anyone else who may have the same issue... Pretty simple answer.. thanks to all!

这是我的代码

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

我正在努力寻找的解决方案是在将类添加到目标后删除该类.

What I am struggling with is finding a solution to removing the class after adding it to the target.

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

I have a list of radio buttons, I am getting the value of the :checked radio input and putting that value in a class.

选中新电台后，它会继续添加到ex类中

When a new radio is checked It keeps adding onto the class ex

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

我需要什么(我知道这很简单，但我不确定要使用什么).

What I need (which I know is very simple but Im not sure what to use).

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

然后当我检查新的收音机输入

then when I check a new radio input

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

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

PS. Ive looked this question up and found many answers but they all use some sort of .siblings() or .parent() callback, they are great solutions, but the inputs and the target are distant from eachother in my code.

推荐答案

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

Changing my answer to be more complete:

$('.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')

This will make the class icon and whatever second class you'd like. That way you can still access the element with $('.icon-wrap .icon')

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

You could also do this if you only have one "a" in your .icon-wrap div:

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

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

这篇关于根据无线电输入值将类添加到目标(切换，类似于函数)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！