jquery sınıf adını değiştir

336

TD etiketinin kimliği verilen bir td etiketi sınıfını değiştirmek istiyorum:

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

Bunu başka bir dom nesnesinin click olayı içindeyken yapmak istiyorum. TD'nin kimliğini nasıl alırım ve sınıfını nasıl değiştiririm?

jquery css

— aek
kaynak

704

Şunları yapabilirsiniz set (olursa olsun ne sınıfını oldu kullanarak) .attr()bu gibi:

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

Bir sınıf eklemek istiyorsanız .addclass()bunun yerine şunu kullanın :

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

Veya sınıfları kullanarak .toggleClass()şunları değiştirmenin kısa bir yolu :

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

İşte classözellikle öznitelik için jQuery yöntemlerinin tam listesi .

— Nick Craver
kaynak

Hey @Nick, ilk td üst öğesini [ var $td = $(this).parents('td:first')] bulan kimliği [ var id = $td.attr('id');] ve ayrıca sınıfı [ var class = $td.attr('class');] bulan bir olay işleyicisi ekleyin çünkü TD içinde bir tıklama öğesinin tetiklemesi istiyor

— Bob Fincheimer

@Bob - Takip etmiyorum, bunu nereden alıyorsun, başka bir soru? Bu, elemanın kimliğine sahip olduğunu söylüyor :) Ayrıca .closest('td')yerine kullanabileceğiniz bir ebeveyn almak için .parents('td:first'):)

— Nick Craver

1

onun son cümlesi:

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?

- belki yanlış okuyorum, belki o sınıf değiştirmek için td kimliğini kullanmak anlamına gelir ...

— Bob Fincheimer

1

@Bob - Doğru ... başka bir DOM nesnesi, söz konusu nesnenin söz konusu içeride olduğunu varsayıyorsunuz<td> :)

— Nick Craver

Not change_mebölümü kullanırsanız isteğe bağlıdırtoggleClass()

— sakisk

93

Bence bunu arıyorsun:

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

— Fosco
kaynak

32

Bence bir sınıf adını değiştirmek istiyor.

Bunun gibi bir şey işe yarayacaktır:

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

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

— kriko
kaynak

Ancak başka bir dom nesnesinin tıklama etkinliğinin içinde yapmak istedi

— keyser

9

Bunu yapabilirsiniz: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); Veya bunu yapabilirsiniz

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

— Alireza Masali
kaynak

6

AddClass veya toggleClass'a göz atabilirsiniz

— Karl Johan
kaynak

6

Yani tıklatıldığında değiştirmek istersiniz ... tüm süreçten geçmeme izin verin. "Harici DOM Nesneniz" in bir seçim gibi bir girdi olduğunu varsayalım:

Bu HTML ile başlayalım:

<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>

Bazı çok temel CSS'ler:

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

Ve bir jQuery etkinliği ayarlayın:

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

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

Şimdi, seçimden bir şey seçtiğinizde, otomatik olarak eşleşen metne sahip bir hücre bulur ve tüm kimlik tabanlı işlemi bozmanıza olanak tanır. Tabii ki, bu şekilde yapmak istiyorsanız, komut dosyasını değerleri değil kimlik kullanmak için kolayca değiştirebilirsiniz.

.filter("#"+useVal)

ve kimlikleri uygun şekilde eklediğinizden emin olun. Bu yardımcı olur umarım!

— Trafalmadorian
kaynak

4

DÜZENLE:

İç içe bir öğeden değiştirdiğinizi söylüyorsanız , kimliğe ihtiyacınız yoktur. Bunun yerine şunları yapabilirsiniz:

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

Orijinal cevap:

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

Başka bir seçenek:

$('#td_id').toggleClass('change_me some_other_class');

— user113716
kaynak

Ben OP <td>olmasına rağmen, o dikkatle tekrar okuyun :) sanmıyorum

— Nick Craver

@Nick - Evet, güncellemeyi ekledim çünkü tekrar okudum ve OP'nin " td'nin kimliğini nasıl alıp değiştireceğim ..." diye sorduğunu gördüm . Bu, OP'nin kimlik üzerinde bir tutamağı olmadığına inanmamı sağladı, bu da orijinal cevabımı çok yararlı değil. Bu göz önüne alındığında, öğenin işleyiciyle iç içe olduğunu varsayıyorum. Ama bu kesinlikle bir varsayım.

— user113716

2

Zaten bir sınıfınız varsa ve bir sınıf eklemek yerine sınıflar arasında geçiş yapmanız gerekirse, geçiş olaylarını zincirleyebilirsiniz:

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

— lentyai
kaynak

2

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

or

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

— Prabhu
kaynak

1

bu yöntem benim için iyi çalışıyor

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

— Puterafx Fx
kaynak

Bununla ilgili biraz ayrıntı verin.

— uçak

0

jquery kullanarak sınıfı değiştirme

bunu dene

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

bu sorguyu kullanarak herhangi bir özelliği de ayarlayabilirsiniz

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

— Aşk Kumar
kaynak

-1

Daha iyi className değiştirmek için .prop kullanın ve mükemmel çalıştı:

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

bu kod satırı için newClass'ın adını ve elbette öğenin kimliğini bir sonraki örnekte değiştirmeniz gerekir: idelementinyourpage

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

Bu arada, herhangi bir öğeye hangi stilin uygulandığını aramak istediğinizde, sayfanız gösterildiğinde tarayıcınızda F12'yi tıklamanız ve ardından görmek istediğiniz öğe olan DOM Explorer sekmesinden seçmeniz yeterlidir. Stiller'de artık öğenize hangi stillerin uygulandığını ve hangi sınıftan okuduğunu görebilirsiniz.

— Alexis Gassan
kaynak