Chcę zmienić klasę znacznika td danym id TD tagu:jquery nazwa klasy zmiana
<td id="td_id" class="change_me"> ...
Chcę być w stanie to zrobić, gdy wewnątrz zdarzenia click jakiegoś innego obiektu DOM. Jak pobrać identyfikator td i zmienić jego klasę?
Można ustawić klasę (niezależnie od tego, co to był) za pomocą .attr(), tak:
$("#td_id").attr('class', 'newClass');
Jeśli chcesz dodać klasę, użyj .addclass() zamiast, jak to :
$("#td_id").addClass('newClass');
lub krótki sposób, aby zamienić klas używając .toggleClass():
$("#td_id").toggleClass('change_me newClass');
Here's the full list of jQuery methods specifically for the class attribute.
EDIT:
Jeśli mówisz, że jesteś zmieniając go z zagnieżdżonego elementu, nie trzeba identyfikator w ogóle. Można to zrobić w zamian:
$(this).closest('td').toggleClass('change_me some_other_class');
//or
$(this).parents('td:first').toggleClass('change_me some_other_class');
Oryginalny odpowiedź:
$('#td_id').removeClass('change_me').addClass('some_other_class');
Inną opcją jest:
$('#td_id').toggleClass('change_me some_other_class');
Nie sądzę, że OP-y wewnątrz'
@Nick - Tak, ja dodano aktualizację, ponieważ przeczytałem ją ponownie i zobaczyłem, że OP pyta * "Jak pobrać identyfikator td i zmienić ..." *. To doprowadziło mnie do przekonania, że OP nie ma uchwytu na identyfikatorze, co sprawiłoby, że moja oryginalna odpowiedź nie byłaby bardzo pomocna.Biorąc to pod uwagę, zakładam, że element z obsługą jest zagnieżdżony. Ale z pewnością jest to założenie. – user113716
myślę szukasz to:
$('#td_id').removeClass('change_me').addClass('new_class');
Możesz sprawdzić addClass lub toggleClass
Więc chcesz go zmienić, kiedy jest kliknięty .. pozwól mi przejść przez cały proces. Załóżmy, że "Zewnętrzne DOM obiektu" jest wejściem, 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 skonfigurować 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, gdy wybierzesz coś z listy wyboru, automatycznie odnajduj komórkę z pasującym tekstem, umożliwiając przekreślenie całego procesu opartego na identyfikatorze. Oczywiście, jeśli chcesz zrobić to w ten sposób, można łatwo zmodyfikować skrypt do użycia identyfikatorów zamiast wartości mówiąc
.filter("#"+useVal)
i upewnij się, aby dodać identyfikatory odpowiednio. Mam nadzieję że to pomoże!
Myślę, że chce zastąpić nazwę klasy.
Coś jak to będzie działać:
$(document).ready(function(){
$('.blue').removeClass('blue').addClass('green');
});
z http://monstertut.com/2012/06/use-jquery-to-change-css-class/
Ale chciał to zrobić wewnątrz zdarzenia kliknięcia jakiegoś innego obiektu DOM. – keyser
Można zrobić to: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); Albo można to zrobić
$("#td_id").removeClass('Old_class').addClass('New_class');
W przypadku, że masz już klasa i trzeba na przemian między klasami przeciwstawiać się dodaniu klasy, możesz przełączać zdarzenia łańcuchowe:
$('li.multi').click(function(e) {
$(this).toggleClass('opened').toggleClass('multi-opened');
});
$('.btn').click(function() {
$('#td_id').removeClass();
$('#td_id').addClass('newClass');
});
or
$('.btn').click(function() {
$('#td_id').removeClass().addClass('newClass');
});
ta metoda działa dobrze dla mnie
$('#td_id').attr('class','new class');
Proszę podać szczegółowe informacje na jego temat. – aircraft
Hej @Nick, dodać moduł obsługi zdarzeń, która znajdzie pierwszy td rodzica [ 'var $ td = $ (this) .parents (” td: first ') '] następnie pobiera jego identyfikator [' var id = $ td.attr (' id ');]], a także klasa ['var class = $ td.attr (' class ');'], ponieważ on chce elementu kliknięcia wewnątrz TD, aby go uruchomić –
@Bob - Nie podążam, skąd masz to, inne pytanie? Ten mówi, że ma identyfikator elementu :) Również aby uzyskać rodzica można użyć '.closest ('td')' zamiast '.parents ('td: first')' :) –
jego ostatnie zdanie: ' Chcę móc to zrobić podczas zdarzenia click jakiegoś innego obiektu DOM. Jak mogę pobrać identyfikator td i zmienić jego klasę? '- może czytam to źle, może on oznacza użycie identyfikatora td do zmiany klasy ... –