Ajout d'une classe à une étiquette avec JQuery

J'essaie d'ajouter une classe à une étiquette d'une case à cocher sur l'événement click de la case à cocher avec jQuery. J'appelle la fonction suivante après avoir récupéré le HTML pour les cases à cocher dans un appel ajax.Ajout d'une classe à une étiquette avec JQuery

function modDispTable() { 
    $("#disptbl :input").each(function() { 
     $(this).click(function() { 
      var lblid = $(this).attr("id") + "_lbl"; 

      if ($(this).is(":checked")) { 
       $(lblid).addClass('chksel'); 
      } 
      else { 
       $(lblid).removeClass('chksel'); 
      } 
     }); 
    }); 
}

Il y a plus de cases à cocher, mais le résultat HTML pour toutes les cases ressemble à ceci:

<label id="chk_sobomnifeat_lbl" name="chk_sobomnifeat_lbl" for="chk_sobomnifeat" class="radiolbl chkmod chkmod1"> 
<input id="chk_sobomnifeat" name="chk_sobomnifeat" value="chk" type="checkbox"> 
Sobella Omni Feature Display 
</label>

En ce moment, tout ce que je suis en train de faire est d'appliquer une couleur de fond différente. Le CSS est dans un fichier qui est inclus avec la page.

.chksel { 
    background-color: #D3CEBE; 
}

Je ne reçois aucune erreur. Le débogage dans Firebug me rend encore plus perplexe lorsque les événements click sont déclenchés, lblid contient la bonne valeur d'id (celle du label), et la ligne addClass est censée être exécutée.

Est-ce que quelqu'un a des idées pour lesquelles la classe ne s'appliquera pas? J'utilise JQuery 1.4.4.

Source

2010-11-27 Buggabill

Je pense qu'il vous manque un # dans votre chaîne d'ID.

var lblid = "#" + $(this).attr("id") + "_lbl";

Source

2010-11-27 00:23:39 Chris

Je devais choisir un soulignant ce petit moment facepalm du mien ... Merci à tous! – Buggabill

Vous devez probablement le sélecteur id comme:

var lblid = "#" + $(this).attr("id") + "_lbl";

Mais encore plus cool woud être (puisque vous utilisez le balisage approprié déjà):

var label = $("[for=" + $(this).attr("id") + "]");

Source

2010-11-27 00:23:47 Daff

Intéressant ... Comment utiliser 'label' dans mon script? Je peux manquer ce que vous allez ici. Après avoir assigné 'label', devrais-je faire quelque chose comme' label.addClass ("chksel"); '? – Buggabill

J'ai fait un peu de recherche et j'ai compris ce que vous alliez faire ici. J'ai vraiment adoré! Il a coupé un tas de code hors de ma situation particulière. Je l'ai utilisé comme un guide - http://stackoverflow.com/questions/285522/find-html-label-associated-with-a-given-input/285565#285565. Merci beaucoup! C'était bien plus cool! – Buggabill

Heureux que vous l'ayez compris. La bonne chose à propos de cette solution est que vous n'avez pas besoin d'un tas d'identifiants inutiles. Vous pouvez utiliser label comme objet jQuery et l'intégrer dans $ (label) (l'utilisation d'un objet jQuery sur un objet jQuery renvoie cet objet). – Daff

Essayez d'ajouter " # ":

var lblid = "#" + $(this).attr("id") + "_lbl";

Source

2010-11-27 00:24:37 dubrox

changer le sélecteur à $('#'+lblid)

Source

2010-11-27 00:25:41

Ajout d'une classe à une étiquette avec JQuery

Répondre

Questions connexes