„Pin“ eine Klasse mit dem ausgewählten Optionsfeld?

Question

Ich versuche, eine Klasse zu dem ausgewählten Radioeingang hinzufügen und dann diese Klasse entfernen, wenn ein anderes Radio des gleichen Typs ausgewählt ist

Die Radio-Buttons haben die Klasse ‚radio_button‘, aber ich kann nicht bekommen die Klasse mit dem folgenden Code zu ändern.

  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');
  }

Answer 1

Tre Problem durch einen zusätzlichen Platz in Ihren Selektoren verursacht wird.

Statt:

$('input.radio_button :radio')

Sie wollten schreiben:

$('input.radio_button:radio')

Answer 2

Sie können auch die Vorteile von jQuery Verkettbarkeit nehmen wollen die Menge der Arbeit zu reduzieren Sie tun. (Anstatt neu zu finden, diese Tasten immer und immer wieder.) So etwas wie folgt aus:

  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');
  }

Answer 3

• Geben Sie jedes Optionsfeld eine eindeutige ID
• Übergeben Sie die ID auf dem Klick
• Entfernen Sie die „fokussierte“ Klassennamen für alle Optionsfelder mit der gleichen Klasse
• Fügen Sie die „fokussierter“ Klasse in den Radio-Button mit der ID Sie übergaben

Answer 4

Erstens, ich stimme mit Rene Saarsoo Antwort über den zusätzlichen Platz.

Zweitens versuchen Sie auch den Stil auf das Radio-Button-Label bewerben? Sie wollen wahrscheinlich die Tasten und Etiketten irgendwie zusammen wickeln. Zum Beispiel:

<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>

Dann der zusätzlichen Anrufe in Ihrem livequery Anruf loszuwerden und den Code bewegen sich von updateSelectedStyle () Funktion in Ihrem livequery Anruf (ich bemerkt Probleme mit IE sonst):

   jQuery(".radio_button").livequery('click',function() {
        $('input.radio_button:radio').parent(".radiowrapper").removeClass('focused');
        $('input.radio_button:radio:checked').parent(".radiowrapper").addClass('focused');
   });