web-dev-qa-db-fra.com

jquery change nom de classe

Je souhaite modifier la classe d'une balise td en fonction de son identifiant:

<td id="td_id" class="change_me"> ...

Je veux pouvoir faire ceci tout en étant dans l'événement click d'un autre objet dom. Comment puis-je récupérer l'id du td et changer de classe?

jquerycss
300
aeq

Vous pouvez définir la classe (quel que soit ce que était) en utilisant .attr() , comme ceci:

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

Si vous voulez ajouter une classe, utilisez .addclass() à la place, comme ceci:

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

Ou un moyen court pour échanger des classes en utilisant .toggleClass() :

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

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

646
Nick Craver

Je pense que vous cherchez ceci:

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

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

Quelque chose comme ça marcherait: 

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

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

27
jack

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

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

Donc, vous voulez le changer QUAND vous cliquez dessus ... laissez-moi passer en revue tout le processus . Supposons que votre "objet DOM externe" soit une entrée, comme une sélection

Commençons par ce code HTML:

<body>
  <div>
    <select id="test">
      <option>Bob</option>
      <option>Sam</option>
      <option>Sue</option>
      <option>Jen</option>
    </select>
  </div>

  <table id="theTable">
    <tr><td id="cellToChange">Bob</td><td>Sam</td></tr>
    <tr><td>Sue</td><td>Jen</td></tr>
  </table>
</body>

Quelques CSS très basiques:

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

Et configurez 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())});
});

Désormais, chaque fois que vous sélectionnez un élément dans la sélection, une cellule avec le texte correspondant est automatiquement trouvée, ce qui vous permet de renverser le processus complet basé sur un identifiant. Bien sûr, si vous voulez le faire de cette façon, vous pouvez facilement modifier le script pour utiliser des identifiants plutôt que des valeurs en disant: 

.filter("#"+useVal)

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

6
Trafalmadorian

Vous pouvez consulter addClass ou toggleClass

6
Karl Johan

MODIFIER:

Si vous dites que vous le remplacez à partir d'un élément imbriqué, vous n'avez pas du tout 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');
4
user113716
$('.btn').click(function() {
    $('#td_id').removeClass();
    $('#td_id').addClass('newClass');
});

or

$('.btn').click(function() {
    $('#td_id').removeClass().addClass('newClass');
});
2
Prabhu

cette méthode fonctionne bien pour moi

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

changer de classe en utilisant jquery

essayez ceci

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

vous pouvez également définir n'importe quel attribut à l'aide de cette requête

$('#selector_id').attr('Attribute Name','Attribute Value');
0
Love Kumar

Si vous avez déjà une classe et devez alterner entre les classes opposées pour ajouter une classe, vous pouvez chaîner des événements de basculement:

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

Je ferais mieux d'utiliser le .prop pour changer le className et cela a fonctionné parfaitement:

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

pour cette ligne de code, il vous suffit de changer le nom de newClass, et bien sûr l'id de l'élément, dans l'exemple suivant: idelementinyourpage

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

En passant, 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 l'élément dans l'explorateur DOM, l'élément à afficher. Dans Styles, vous pouvez maintenant voir quels styles sont appliqués à votre élément et à partir de quelle classe il lit.

0
Alexis Gassan