webentwicklung-frage-antwort-db.com.de

jquery ändert den Klassennamen

Ich möchte die Klasse eines td-Tags mit der ID des td-Tags ändern:

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

Ich möchte in der Lage sein, dies während des Klickereignisses eines anderen dom-Objekts auszuführen. Wie greife ich die ID des TDs und ändere seine Klasse?

300
aeq

Sie können setzen die Klasse (unabhängig davon, was war war), indem Sie .attr() verwenden:

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

Wenn Sie add eine Klasse hinzufügen möchten, verwenden Sie stattdessen .addclass() :

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

Oder eine kurze Möglichkeit zum Austauschen von Klassen mit .toggleClass() :

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

Hier ist die vollständige Liste der jQuery-Methoden speziell für das class-Attribut .

646
Nick Craver

Ich denke, dass du das suchst:

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

Ich denke, er möchte einen Klassennamen ersetzen.

So etwas würde funktionieren: 

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

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

27
jack

Sie können dies tun: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); Oder Sie können dies tun 

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

Sie möchten es also ändern, WENN es angeklickt wird ... Lassen Sie mich den gesamten Prozess durchgehen ... Wir nehmen an, dass Ihr "External DOM Object" eine Eingabe ist, wie ein select

Beginnen wir mit diesem 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>

Einige sehr einfache CSS:

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

Und richten Sie ein jQuery-Ereignis ein:

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

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

Wenn Sie nun etwas aus der Auswahl auswählen, wird automatisch eine Zelle mit dem passenden Text gefunden, sodass Sie den gesamten auf ID basierenden Prozess unterlaufen können. Wenn Sie dies auf diese Weise tun möchten, können Sie das Skript natürlich so ändern, dass IDs anstelle von Werten verwendet werden 

.filter("#"+useVal)

und stellen Sie sicher, dass Sie die IDs entsprechend hinzufügen. Hoffe das hilft!

6
Trafalmadorian

Sie können addClass oder toggleClass auschecken

6
Karl Johan

EDIT:

Wenn Sie sagen, dass Sie es von einem verschachtelten -Element aus ändern, benötigen Sie die ID überhaupt nicht. Sie können dies stattdessen tun:

$(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');
4
user113716
$('.btn').click(function() {
    $('#td_id').removeClass();
    $('#td_id').addClass('newClass');
});

or

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

diese Methode funktioniert gut für mich

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

ändere die Klasse mit jquery

versuchen Sie dies

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

sie können mit dieser Abfrage auch ein beliebiges Attribut festlegen

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

Falls Sie bereits über eine Klasse verfügen und zwischen den Klassen wechseln müssen, anstatt eine Klasse hinzuzufügen, können Sie Toggle-Ereignisse verketten:

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

Ich benutze die .prop besser, um den Klassennamen zu ändern und es hat perfekt funktioniert:

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

für diese Codezeile müssen Sie lediglich den Namen von newClass und natürlich die ID des Elements im nächsten Beispiel ändern: idelementinyourpage

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

Wenn Sie suchen möchten, welcher Stil auf ein Element angewendet wird, klicken Sie in Ihrem Browser einfach auf F12, wenn Ihre Seite angezeigt wird, und wählen Sie dann auf der Registerkarte von DOM Explorer das gewünschte Element aus. In Styles können Sie jetzt sehen, welche Styles auf Ihr Element angewendet werden und von welcher Klasse es gelesen wird.

0
Alexis Gassan