jquery changer le nom de la classe

Je veux changer la classe d’une balise td en fonction de l’identifiant de la balise td:

 ... 

Je veux être capable de faire cela dans l’événement click d’un autre object dom. Comment puis-je récupérer l’ID du td et changer sa classe?

Vous pouvez définir la classe (indépendamment de ce qu’elle était ) en utilisant .attr() , comme ceci:

 $("#td_id").attr('class', 'newClass'); 

Si vous voulez append une classe, utilisez .addclass() , comme ceci:

 $("#td_id").addClass('newClass'); 

Ou un moyen .toggleClass() permuter les classes en utilisant .toggleClass() :

 $("#td_id").toggleClass('change_me newClass'); 

Voici la liste complète des méthodes jQuery spécifiquement pour l’atsortingbut class .

Je pense que vous cherchez ceci:

 $('#td_id').removeClass('change_me').addClass('new_class'); 

Je pense qu’il veut remplacer un nom de classe.

Quelque chose comme ça fonctionnerait:

 $(document).ready(function(){ $('.blue').removeClass('blue').addClass('green'); }); 

à partir de http://monstertut.com/2012/06/use-jquery-to-change-css-class/

Vous pouvez faire ceci: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); Ou vous pouvez le faire

 $("#td_id").removeClass('Old_class').addClass('New_class'); 

Vous pouvez vérifier addClass ou toggleClass

Donc, vous voulez le changer QUAND il est cliqué … laissez-moi parcourir tout le processus. Supposons que votre “object DOM externe” soit une entrée, comme un select:

Commençons par ce HTML:

  
BobSam
SueJen

Quelques CSS très basiques:

 ​#theTable td { border:1px solid #555; } .activeCell { background-color:#F00; } 

Et mettre en place un événement jQuery:

 function highlightCell(useVal){ $("#theTable td").removeClass("activeCell") .filter(":contains('"+useVal+"')").addClass("activeCell"); } $(document).ready(function(){ $("#test").change(function(e){highlightCell($(this).val())}); }); 

Maintenant, chaque fois que vous choisissez quelque chose dans la sélection, il trouvera automatiquement une cellule avec le texte correspondant, vous permettant de subvertir l’ensemble du processus basé sur un identifiant. Bien sûr, si vous vouliez le faire de cette façon, vous pourriez facilement modifier le script pour utiliser des identifiants plutôt que des valeurs en disant

 .filter("#"+useVal) 

et assurez-vous d’append les identifiants de manière appropriée. J’espère que cela t’aides!

MODIFIER:

Si vous dites que vous le modifiez à partir d’un élément nested , vous n’avez pas besoin de l’ID. Vous pouvez le faire à la place:

 $(this).closest('td').toggleClass('change_me some_other_class'); //or $(this).parents('td:first').toggleClass('change_me some_other_class'); 

Réponse originale:

 $('#td_id').removeClass('change_me').addClass('some_other_class'); 

Une autre option est:

 $('#td_id').toggleClass('change_me some_other_class'); 
 $('.btn').click(function() { $('#td_id').removeClass(); $('#td_id').addClass('newClass'); }); or $('.btn').click(function() { $('#td_id').removeClass().addClass('newClass'); }); 

Dans le cas où vous avez déjà une classe et que vous avez besoin d’alterner entre les classes comme opposé pour append une classe, vous pouvez enchaîner les événements de basculement:

 $('li.multi').click(function(e) { $(this).toggleClass('opened').toggleClass('multi-opened'); }); 

cette méthode fonctionne bien pour moi

 $('#td_id').attr('class','new class'); 

Je préfère utiliser le .prop pour changer le className et cela a parfaitement fonctionné:

 $(#td_id).prop('className','newClass'); 

pour cette ligne de code il suffit de changer le nom de newClass, et bien sur l’id de l’élément, dans l’exemple suivant: idelementinyourpage

 $(#idelementinyourpage).prop('className','newClass'); 

Par ailleurs, lorsque vous souhaitez rechercher quel style est appliqué à un élément, il vous suffit de cliquer sur F12 dans votre navigateur lorsque votre page est affichée, puis de sélectionner dans l’onglet DOM Explorer l’élément que vous souhaitez voir. Dans les styles, vous pouvez maintenant voir quels styles sont appliqués à votre élément et de quelle classe il est lu.