1

我正在尝试向选定的收音机输入添加一个类，然后在选择另一个相同类型的收音机时删除该类

单选按钮具有类“radio_button”，但我无法使用以下代码更改类。

  jQuery(".radio_button").livequery('click',function() {  

      $('input.radio_button :radio').focus(updateSelectedStyle);
      $('input.radio_button :radio').blur(updateSelectedStyle);
      $('input.radio_button :radio').change(updateSelectedStyle);
  }
  function updateSelectedStyle() {
      $('input.radio_button :radio').removeClass('focused');
      $('input.radio_button :radio:checked').addClass('focused');
  }
4

4 回答 4

2

Tre 问题是由选择器中的一个额外空间引起的。

代替：

$('input.radio_button :radio')

你想写：

$('input.radio_button:radio')
于 2009-01-07T19:34:27.183 回答
2

您可能还想利用 jQuery 的可链接性来减少您正在做的工作量。（而不是一遍又一遍地重新找到这些按钮。）像这样的东西：

  jQuery(".radio_button").livequery('click',function() {  
    $('input.radio_button:radio')
      .focus(updateSelectedStyle)
      .blur(updateSelectedStyle)
      .change(updateSelectedStyle);
  });
  function updateSelectedStyle() {
    $('input.radio_button:radio')
      .removeClass('focused')
      .filter(':checked').addClass('focused');
  }
于 2009-01-07T21:12:52.007 回答
1
  • 给每个单选按钮一个唯一的 ID
  • 通过点击传递ID
  • 删除所有具有相同类的单选按钮的“聚焦”类名
  • 使用您传递的 ID 将“focussed”类添加到单选按钮
于 2009-01-07T19:12:02.627 回答
0

首先，我同意 Rene Saarsoo 关于额外空间的回答。

其次，您是否也尝试将样式应用于单选按钮标签？您可能想以某种方式将按钮和标签包装在一起。例如：

<span class="radiowrapper"><input type="radio" name="system" value="1" class="radio_button"> 1</span>
<br>
<span class="radiowrapper"><input type="radio" name="system" value="2" class="radio_button"> 2</span>

然后摆脱你的 livequery 调用中的额外调用，并将代码从 updateSelectedStyle()函数移动到你的 livequery 调用中（否则我注意到 IE 的问题）：

   jQuery(".radio_button").livequery('click',function() {
        $('input.radio_button:radio').parent(".radiowrapper").removeClass('focused');
        $('input.radio_button:radio:checked').parent(".radiowrapper").addClass('focused');
   });
于 2009-01-07T20:18:28.560 回答