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

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

32

Myślę, że chce zastąpić nazwę klasy.

Coś takiego działałoby:

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

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

— Jacek
źródło

Ale chciał to zrobić wewnątrz zdarzenia kliknięcia jakiegoś innego obiektu dom

— keyser

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

Możesz sprawdzić addClass lub toggleClass

— Karl Johan
ź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