jquery zmień nazwę klasy

336

Chcę zmienić klasę znacznika td, biorąc pod uwagę identyfikator znacznika td:

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

Chcę być w stanie to zrobić podczas zdarzenia kliknięcia jakiegoś innego obiektu dom. Jak mogę pobrać identyfikator td i zmienić jego klasę?

jquery css aeq
źródło

Odpowiedzi:

704

Możesz ustawić klasę (bez względu na to, co to było ), używając .attr():

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

Jeśli chcesz dodać klasę, użyj .addclass()zamiast tego:

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

Lub krótki sposób na zamianę klas za pomocą .toggleClass():

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

Oto pełna lista metod jQuery specjalnie dla tego classatrybutu .

Nick Craver
źródło
Hej @Nick, dodaj moduł obsługi zdarzeń, który znajdzie pierwszego td rodzica [ var $td = $(this).parents('td:first')], a następnie pobiera jego identyfikator [ var id = $td.attr('id');], a także klasę [ var class = $td.attr('class');], ponieważ chce, aby element kliknięcia wewnątrz TD go uruchomił
Bob Fincheimer
@ Bob - Nie rozumiem, skąd to bierzesz, kolejne pytanie? Ten mówi, że ma identyfikator elementu :) Również, aby uzyskać rodzica, którego możesz użyć .closest('td')zamiast .parents('td:first'):)
Nick Craver
1
jego ostatnie zdanie: 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?- może źle to czytam, może ma na
myśli
1
@Bob - Prawo ... jakiś inny obiekt DOM, jesteś przy założeniu, że obiekt znajduje się wewnątrz <td>w pytaniu :)
Nick Craver
Pamiętaj, że change_meczęść jest opcjonalna, jeśli używasztoggleClass()
sakisk
93

Myślę, że szukasz tego:

$('#td_id').removeClass('change_me').addClass('new_class');
Fosco
źródło
9

Możesz to zrobić: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); lub możesz to zrobić

$("#td_id").removeClass('Old_class').addClass('New_class');
Alireza Masali
źródło
6

Więc chcesz to zmienić, kiedy kliknie ... pozwól mi przejść przez cały proces. Załóżmy, że „Zewnętrzny obiekt DOM” jest danymi wejściowymi, podobnie jak select:

Zacznijmy od tego 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>

Niektóre bardzo podstawowe CSS:

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

I skonfiguruj zdarzenie jQuery:

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

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

Teraz, za każdym razem, gdy wybierzesz coś z zaznaczenia, automatycznie znajdzie komórkę z pasującym tekstem, co pozwoli ci obalić cały proces oparty na identyfikatorze. Oczywiście, jeśli chcesz to zrobić w ten sposób, możesz łatwo zmodyfikować skrypt, aby używał identyfikatorów zamiast wartości, mówiąc

.filter("#"+useVal)

i upewnij się, że odpowiednio dodałeś identyfikatory. Mam nadzieję że to pomoże!

Trafalmadorian
źródło
4

EDYTOWAĆ:

Jeśli mówisz, że zmieniasz go z elementu zagnieżdżonego , wcale nie potrzebujesz identyfikatora. Możesz to zrobić zamiast tego:

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

Oryginalna odpowiedź:

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

Inną opcją jest:

$('#td_id').toggleClass('change_me some_other_class');
użytkownik113716
źródło
Nie sądzę, żeby PO <td>znajdowało się w środku , choć być może, przeczytaj je uważnie :)
Nick Craver
@Nick - Tak, dodałem aktualizację, ponieważ przeczytałem ją ponownie i zobaczyłem, że OP pyta „Jak pobrać identyfikator td i zmienić ...” . Doprowadziło mnie to do przekonania, że ​​OP nie ma żadnego identyfikatora, co sprawiłoby, że moja pierwotna odpowiedź nie byłaby zbyt pomocna. Biorąc to pod uwagę, zakładam, że element z modułem obsługi jest zagnieżdżony. Ale z pewnością jest to założenie.
user113716,
2

Jeśli masz już klasę i musisz przełączać się między klasami zamiast dodawać klasę, możesz łańcuchowo przełączać zdarzenia:

$('li.multi').click(function(e) {
    $(this).toggleClass('opened').toggleClass('multi-opened');
});
lentyai
źródło
2 
$('.btn').click(function() {
    $('#td_id').removeClass();
    $('#td_id').addClass('newClass');
});

or

$('.btn').click(function() {
    $('#td_id').removeClass().addClass('newClass');
});
Prabhu
źródło
1

ta metoda działa dobrze dla mnie

$('#td_id').attr('class','new class');
Puterafx Fx
źródło
Zrób kilka szczegółów na ten temat.
samolot
0

zmień klasę za pomocą jquery

Spróbuj tego

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

możesz również ustawić dowolny atrybut za pomocą tego zapytania

$('#selector_id').attr('Attribute Name','Attribute Value');
Uwielbiam Kumar
źródło
-1

Lepiej używam .prop do zmiany className i działało to idealnie:

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

dla tego wiersza kodu wystarczy zmienić nazwę newClass i oczywiście identyfikator elementu, w następnym przykładzie: idelementinyourpage

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

Nawiasem mówiąc, jeśli chcesz wyszukać, który styl jest zastosowany do dowolnego elementu, po prostu kliknij F12 w przeglądarce, gdy wyświetlana jest strona, a następnie wybierz w zakładce DOM Explorer element, który chcesz zobaczyć. W Stylach możesz teraz zobaczyć, jakie style są stosowane do elementu i z jakiej klasy jego czytanie.

Alexis Gassan
źródło