Beralih antar kelas dengan klik [duplikat]

Bagaimana cara menambah dan menghapus kelas setiap kali saya mengklik?

Kode Asli

HTML:

<div class="box"></div>

CSS:

.box{
  width: 100px;
  height: 100px; 
  background: blue;
}

Saya ingin menambahkan:

.rounded {
  border-radius: 10px;
}

Saya tahu saya harus menggunakan fungsi klik pada div kotak, tapi saya tidak tahu cara menambahkan kelas dan menghapusnya.

Menjawab:

Gunakan kelas sakelar

$(".box").click(function(){
   $(this).toggleClass("rounded");
});

javascript class click jquery
person Jtwa    schedule 07.06.2014    source sumber

Jawaban (4)


arrow_upward
0
arrow_downward

Anda tidak harus melakukan ini. Bagaimana dengan pendekatan ini...

.box{
  width: 100px;
  height: 100px; 
  background: blue;
}

.box.rounded {
  border-radius: 10px;
}

Kemudian alihkan saja kelas "bulat" dengan toggleClass.

$('.box').toggleClass('rounded');
person Bill Criswell    schedule 07.06.2014

arrow_upward
2
arrow_downward

Solusi lain hanya beralih antar kelas. Jika Anda ingin mengubah yang sudah ada dan menambah/menghapus nilai darinya, gunakan ini:

$('.box').css('border-radius','50px');

dan untuk menghapus:

$('.box').css('border-radius', '');

Contoh kerja.

person decho    schedule 07.06.2014
comment
Inilah yang saya cari! Terima kasih! Saya belum bisa memberikan poin rep. Itu tidak mengizinkanku, tapi sekali lagi terima kasih. - person Jtwa; 07.06.2014
comment
Tidak masalah, saya dengan senang hati membantu. - person decho; 07.06.2014
comment
namun Anda masih bisa menerima jawabannya dengan mengklik tanda 'centang'. - person zaq; 07.06.2014
comment
Tidak tahu itu! Selesai! - person Jtwa; 07.06.2014

arrow_upward
1
arrow_downward

Jquery dapat menghapus sebuah kelas, namun tidak dapat mengubah CSS apa pun di kelas:

$(target).addClass("myClass");
$(target).removeClass("myClass andThisOne removeSoManyClasses");

Untuk menimpa kelas dengan cara lain:

$("body").append("<style class='remove'>.box{/*many css*/}</style>");
$(".remove").remove();
person Daniel Cheung    schedule 07.06.2014

arrow_upward
0
arrow_downward

Ya itu mungkin.
Untuk menambahkan kelas css sintaksnya adalah,

$(selector).addClass(classname)

Untuk menghapus kelas, sintaksnya adalah,

$(selector).removeClass(classname)

Biola yang Berfungsi

person Krishanu Dey    schedule 07.06.2014