jquery cambia il nome della classe

336

Voglio cambiare la classe di un tag td dato l'ID del tag td:

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

Voglio essere in grado di farlo mentre all'interno dell'evento click di qualche altro oggetto dom. Come afferro l'id del td e cambio la sua classe?

jquery css

— aeq
fonte

704

Puoi impostare la classe (indipendentemente da quale fosse ) utilizzando .attr(), in questo modo:

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

Se vuoi aggiungere una classe, usa .addclass()invece, in questo modo:

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

O un modo breve per scambiare le classi usando .toggleClass():

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

Ecco l'elenco completo dei metodi jQuery specificamente per l' classattributo .

— Nick Craver
fonte

Ehi @Nick, aggiungi un gestore di eventi che trova il primo genitore td [ var $td = $(this).parents('td:first')], quindi ottiene il suo id [ var id = $td.attr('id');] e anche la classe [ var class = $td.attr('class');] perché vuole che un elemento clic all'interno del TD lo

— attivi

@Bob - Non seguo, da dove lo prendi, un'altra domanda? Questo dice che ha l'ID dell'elemento :) Anche per ottenere un genitore puoi usare .closest('td')invece di .parents('td:first'):)

— Nick Craver

1

la sua ultima frase:

I want to be able to do this while inside the click event of some other dom object. How do I grab the td's id and change its class?

- forse sto leggendo male, forse intende usare l'id del td per cambiare classe ...

— Bob Fincheimer,

1

@Bob - Giusto ... qualche altro oggetto DOM, stai supponendo che l'oggetto sia all'interno della <td>questione :)

— Nick Craver

Si noti che la change_meparte è facoltativa se si utilizzatoggleClass()

— sakisk il

93

Penso che tu stia cercando questo:

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

— Fosco
fonte

32

Penso che voglia sostituire un nome di classe.

Qualcosa del genere funzionerebbe:

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

da http://monstertut.com/2012/06/use-jquery-to-change-css-class/

— Jack
fonte

Ma voleva farlo all'interno dell'evento click di qualche altro oggetto dom

— keyser

9

Puoi farlo: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); O puoi farlo

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

— Alireza Masali
fonte

6

Puoi dare un'occhiata a addClass o toggleClass

— Karl Johan
fonte

6

Quindi vuoi cambiarlo QUANDO viene cliccato ... lasciami passare l'intero processo. Supponiamo che il tuo "oggetto DOM esterno" sia un input, come una selezione:

Cominciamo con questo 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>

Alcuni CSS molto semplici:

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

E imposta un evento jQuery:

function highlightCell(useVal){
  $("#theTable td").removeClass("activeCell")
      .filter(":contains('"+useVal+"')").addClass("activeCell");
}

$(document).ready(function(){
    $("#test").change(function(e){highlightCell($(this).val())});
});

Ora, ogni volta che scegli qualcosa dalla selezione, troverà automaticamente una cella con il testo corrispondente, permettendoti di sovvertire l'intero processo basato su ID. Naturalmente, se si desidera farlo in questo modo, è possibile modificare facilmente lo script per utilizzare gli ID anziché i valori dicendo

.filter("#"+useVal)

e assicurati di aggiungere gli ID in modo appropriato. Spero che questo ti aiuti!

— Trafalmadorian
fonte

4

MODIFICARE:

Se stai dicendo che lo stai cambiando da un elemento nidificato , non hai bisogno dell'ID. Puoi farlo invece:

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

Risposta originale:

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

Un'altra opzione è:

$('#td_id').toggleClass('change_me some_other_class');

— user113716
fonte

Non penso che l'OP sia all'interno <td>, sebbene possa essere, rileggere attentamente :)

— Nick Craver

@Nick - Sì, ho aggiunto l'aggiornamento perché l'ho letto di nuovo e ho visto che OP mi stava chiedendo "Come posso prendere l'ID del TD e cambiare ..." . Questo mi ha portato a credere che OP non abbia un handle sull'ID, il che renderebbe la mia risposta originale non molto utile. Detto questo, suppongo che l'elemento con il gestore sia nidificato. Ma è certamente un presupposto.

— user113716

2

Nel caso in cui tu abbia già una classe e devi alternare tra le classi invece di aggiungere una classe, puoi alternare gli eventi:

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

— lentyai
fonte

2

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

or

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

— Prabhu
fonte

1

questo metodo funziona bene per me

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

— Puterafx Fx
fonte

Fai alcuni dettagli al riguardo.

— aereo il

0

cambia classe usando jquery

prova questo

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

puoi anche impostare qualsiasi attributo usando questa query

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

— Love Kumar
fonte

-1

Uso meglio il .prop per cambiare className e ha funzionato perfettamente:

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

per questa riga di codice devi solo cambiare il nome di newClass, e ovviamente l'id dell'elemento, nel prossimo esempio: idelementinyourpage

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

A proposito, quando vuoi cercare quale stile viene applicato a qualsiasi elemento, fai clic su F12 sul browser quando viene visualizzata la tua pagina, quindi seleziona nella scheda di DOM Explorer l'elemento che vuoi vedere. In Stili ora puoi vedere quali stili sono applicati al tuo elemento e da quale classe la sua lettura.

— Alexis Gassan
fonte