Ich möchte die Klasse eines td-Tag die ID des td-Tag gegeben ändern:jquery ändern Klassenname
<td id="td_id" class="change_me"> ...
Ich möchte innerhalb des Click-Ereignis von einem anderen dom Objekt dieses zu tun, während in der Lage sein. Wie nehme ich die ID des TD und ändern Sie seine Klasse?
Sie können gesetzt die Klasse (unabhängig davon, was es war) durch .attr() verwenden, wie folgt aus:
$("#td_id").attr('class', 'newClass');
Wenn Sie wollen eine Klasse hinzuzufügen, verwenden Sie .addclass() stattdessen wie folgt aus :
$("#td_id").addClass('newClass');
Oder ein kurzer Weg Klassen tauschen .toggleClass() mit:
$("#td_id").toggleClass('change_me newClass');
Here's the full list of jQuery methods specifically for the class attribute.
EDIT:
Wenn Sie sagen, dass Sie es von einem verschachtelten Element sind zu ändern, Sie überhaupt die ID nicht benötigen. Sie können dies tun, anstatt:
$(this).closest('td').toggleClass('change_me some_other_class');
//or
$(this).parents('td:first').toggleClass('change_me some_other_class');
Ursprüngliche Antwort:
$('#td_id').removeClass('change_me').addClass('some_other_class');
Eine weitere Option ist:
$('#td_id').toggleClass('change_me some_other_class');
verwenden Ich glaube nicht, dass die OP innerhalb der '', obwohl er könnte, erneut sorgfältig gelesen werden :) –
@Nick - Ja, ich habe das Update hinzugefügt, weil ich es nochmal gelesen habe und gesehen habe, dass OP gefragt hat * "Wie hole ich die ID des TD und ändere ..." *. Dies führte mich zu der Annahme, dass OP die ID nicht im Griff hat, was meine ursprüngliche Antwort nicht sehr hilfreich machen würde.In Anbetracht dessen nehme ich an, dass das Element mit dem Handler verschachtelt ist. Aber es ist sicherlich eine Annahme. – user113716
Ich glaube, Sie für diese suchen:
$('#td_id').removeClass('change_me').addClass('new_class');
Check-out addClass oder toggleClass kann
So möchten Sie es ändern, wenn es angeklickt wird .. .Lass mich durch den ganzen Prozess gehen. Nehmen wir an, dass Ihre "External DOM-Objekt" ist eine Eingabe, wie ein select:
mit diesem HTML Lassen Sie beginnen:
<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>
einige sehr grundlegende CSS:
#theTable td {
border:1px solid #555;
}
.activeCell {
background-color:#F00;
}
Und oben ein jQuery-Ereignis:
function highlightCell(useVal){
$("#theTable td").removeClass("activeCell")
.filter(":contains('"+useVal+"')").addClass("activeCell");
}
$(document).ready(function(){
$("#test").change(function(e){highlightCell($(this).val())});
});
Nun, wenn Sie etwas von der Auswahl holen, wird es automatisch eine Zelle mit dem passenden Text finden, so dass Sie den gesamten ID-basierten Prozess unterlaufen können. Natürlich, wenn Sie es so tun wollen, könnte man leicht das Skript ändern, indem er sagt IDs anstatt Werte zu verwenden
.filter("#"+useVal)
und stellen Sie sicher, dass der IDs in geeigneter Weise hinzuzufügen. Hoffe das hilft!
Ich denke, er möchte einen Klassennamen ersetzen.
So etwas wie dies funktionieren würde:
$(document).ready(function(){
$('.blue').removeClass('blue').addClass('green');
});
von http://monstertut.com/2012/06/use-jquery-to-change-css-class/
Aber er wollte es innerhalb des Klick-Ereignisses eines anderen dom-Objekts tun – keyser
Sie können dies tun: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); Oder Sie können im Falle dieses
$("#td_id").removeClass('Old_class').addClass('New_class');
tun, die Sie bereits haben eine Klasse und müssen zwischen Klassen wechseln, um eine Klasse hinzuzufügen, können Sie Ereignisse umschalten ketten:
$('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');
});
diese Methode funktioniert gut für mich
$('#td_id').attr('class','new class');
Machen Sie einige Details darüber. – aircraft
Hey @ Nick, einen Ereignishandler hinzufügen, die die erste td Elternteil findet [ 'var $ td = $ (this) .parents (‘ td: first ') '] erhält dann seine ID [' var id = $ td.attr (' id '); '] und auch die Klasse [' var class = $ td..attr (' class '); '] weil er will ein Klick-Element in den TD, um es auszulösen –
@Bob - Ich folge nicht, wo bekommen Sie das, eine andere Frage? Dieser sagt, er hat die ID des Elements :) Auch um ein Elternteil zu bekommen, können Sie '.closes ('td')' anstelle von '.parents ('td: first')' :) –
seinen letzten Satz: ' Ich möchte dies während des Klickereignisses eines anderen dom-Objekts tun können. Wie greife ich die ids des tds und ändere seine Klasse? '- Vielleicht lese ich es falsch, vielleicht meint er, benutze die tds ID, um die Klasse zu ändern ... –