jquery mengubah nama kelas

336

Saya ingin mengubah kelas dari tag td mengingat id tag td:

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

Saya ingin dapat melakukan ini sementara di dalam acara klik dari beberapa objek dom lainnya. Bagaimana cara meraih id td dan mengubah kelasnya?

jquery css aeq
sumber

Jawaban:

704

Anda dapat mengatur kelas (terlepas dari apa itu ) dengan menggunakan .attr(), seperti ini:

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

Jika Anda ingin menambahkan kelas, gunakan .addclass(), seperti ini:

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

Atau cara singkat untuk bertukar kelas menggunakan .toggleClass():

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

Berikut daftar lengkap metode jQuery khusus untuk classatribut .

Nick Craver
sumber
Hai @Nick, tambahkan event handler yang menemukan orangtua td pertama [ var $td = $(this).parents('td:first')] lalu dapatkan idnya [ var id = $td.attr('id');] dan juga kelas [ var class = $td.attr('class');] karena ia ingin elemen klik di dalam TD untuk memicunya
Bob Fincheimer
@ Bob - Saya tidak mengikuti, dari mana Anda mendapatkan itu, pertanyaan lain? Yang ini mengatakan dia memiliki ID elemen :) Juga untuk mendapatkan orang tua yang dapat Anda gunakan, .closest('td')bukan .parents('td:first'):)
Nick Craver
1
kalimat terakhirnya: 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?- mungkin aku salah membaca, mungkin dia bermaksud menggunakan id td untuk mengubah kelas ...
Bob Fincheimer
1
@ Bob - Benar ... beberapa objek DOM lainnya , Anda mengasumsikan objek itu ada di <td>dalam pertanyaan :)
Nick Craver
Perhatikan bahwa change_mebagian ini opsional jika Anda menggunakantoggleClass()
sakisk
93

Saya pikir Anda sedang mencari ini:

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

Saya pikir dia ingin mengganti nama kelas.

Sesuatu seperti ini akan berhasil: 

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

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

mendongkrak
sumber
Tetapi dia ingin melakukannya di dalam event klik dari beberapa objek dom lainnya
keyser
9

Anda dapat melakukan ini: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); Atau Anda dapat melakukan ini

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

Jadi Anda ingin mengubahnya KETIKA itu diklik ... biarkan saya pergi melalui seluruh proses. Mari kita asumsikan bahwa "Objek DOM Eksternal" Anda adalah input, seperti pilih:

Mari kita mulai dengan HTML ini:

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

Beberapa CSS yang sangat mendasar:

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

Dan mengatur acara jQuery:

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

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

Sekarang, setiap kali Anda memilih sesuatu dari pilih, itu akan secara otomatis menemukan sel dengan teks yang cocok, memungkinkan Anda untuk menumbangkan seluruh proses berbasis id. Tentu saja, jika Anda ingin melakukannya dengan cara itu, Anda dapat dengan mudah memodifikasi skrip untuk menggunakan ID daripada nilai dengan mengatakan

.filter("#"+useVal)

dan pastikan untuk menambahkan id dengan tepat. Semoga ini membantu!

Orang Trafalmador
sumber
4

EDIT:

Jika Anda mengatakan bahwa Anda mengubahnya dari elemen bersarang , Anda tidak memerlukan ID sama sekali. Anda bisa melakukan ini sebagai gantinya:

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

Jawaban asli:

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

Pilihan lain adalah:

$('#td_id').toggleClass('change_me some_other_class');
pengguna113716
sumber
Saya tidak berpikir OP ada di dalam <td>, meskipun dia mungkin, baca kembali dengan hati-hati :)
Nick Craver
@Nick - Ya, saya menambahkan pembaruan karena saya membacanya lagi dan melihat bahwa OP bertanya "Bagaimana cara saya mengambil id dan mengubah ..." . Ini membuat saya percaya bahwa OP tidak memiliki pegangan pada ID, yang akan membuat jawaban asli saya tidak terlalu membantu. Dengan ini, saya mengasumsikan elemen dengan handler bersarang. Tapi tentu saja itu asumsi.
user113716
2

Jika Anda sudah memiliki kelas dan perlu berganti-ganti antar kelas sebagai lawan untuk menambahkan kelas, Anda dapat membuat rantai acara sakelar:

$('li.multi').click(function(e) {
    $(this).toggleClass('opened').toggleClass('multi-opened');
});
lentyai
sumber
2 
$('.btn').click(function() {
    $('#td_id').removeClass();
    $('#td_id').addClass('newClass');
});

or

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

metode ini bekerja dengan baik untuk saya

$('#td_id').attr('class','new class');
Puterafx Fx
sumber
Buat beberapa detail tentang itu.
Pesawat
0

ganti kelas menggunakan jquery

coba ini

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

Anda juga dapat mengatur atribut apa pun menggunakan kueri ini

$('#selector_id').attr('Attribute Name','Attribute Value');
Cinta Kumar
sumber
-1

Saya lebih baik menggunakan .prop untuk mengubah className dan itu bekerja dengan sempurna:

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

untuk baris kode ini Anda hanya perlu mengubah nama newClass, dan tentu saja id elemen, dalam contoh berikut: idelementinyourpage

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

Ngomong-ngomong, ketika Anda ingin mencari gaya mana yang diterapkan pada elemen apa pun, Anda cukup mengklik F12 di browser Anda ketika halaman Anda ditampilkan, dan kemudian pilih di tab DOM Explorer, elemen yang ingin Anda lihat. Dalam Styles Anda sekarang dapat melihat gaya apa yang diterapkan pada elemen Anda dan dari kelas mana bacaannya.

Alexis Gassan
sumber