& # 8220; Pin & # 8221; una classe per il pulsante di opzione selezionato?

Question

Sto cercando di aggiungere una classe all'ingresso radio selezionato e quindi rimuovere quella classe quando viene selezionata un'altra radio dello stesso tipo

I pulsanti di opzione hanno la classe "radio_button" ma non riesco a visualizzarli la classe da modificare con il codice seguente.

  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

Il problema Tre è causato da uno spazio aggiuntivo nei selettori.

Invece di:

$('input.radio_button :radio')

volevi scrivere:

$('input.radio_button:radio')

Answer 2

Potresti anche voler sfruttare la catenabilità di jQuery per ridurre la quantità di lavoro che stai facendo. (Invece di ritrovare questi pulsanti più e più volte.) Qualcosa del genere:

  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

• Assegna a ciascun pulsante di opzione un ID univoco
• Passa l'ID sul clic
• Rimuovi " focalizzato " nome della classe per tutti i pulsanti di opzione con la stessa classe
• Aggiungi " focalizzato " classe al pulsante di opzione con l'ID che hai passato

Answer 4

In primo luogo, concordo con la risposta di Rene Saarsoo sullo spazio extra.

In secondo luogo, stai anche cercando di applicare lo stile all'etichetta del pulsante di opzione? Probabilmente vuoi avvolgere i pulsanti e le etichette in qualche modo. Ad esempio:

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

Quindi elimina le chiamate extra nella tua chiamata livequery e sposta il codice dalla funzione updateSelectedStyle () nella tua chiamata livequery (ho notato problemi con IE altrimenti):

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