ฉันจะเพิ่มและลบชั้นเรียนทุกครั้งที่คลิกได้อย่างไร
รหัสต้นฉบับ
HTML:
<div class="box"></div>
ซีเอสเอส:
.box{
width: 100px;
height: 100px;
background: blue;
}
ฉันต้องการเพิ่ม:
.rounded {
border-radius: 10px;
}
ฉันรู้ว่าต้องใช้ฟังก์ชันคลิกบน div ของกล่อง แต่ฉันไม่รู้วิธีเพิ่มคลาสและลบคลาสออก
ใช้toggleClass
$(".box").click(function(){
$(this).toggleClass("rounded");
});
คุณไม่ควรจะทำเช่นนี้ แล้วแนวทางนี้ล่ะแทน...
.box{
width: 100px;
height: 100px;
background: blue;
}
.box.rounded {
border-radius: 10px;
}
จากนั้นเพียงสลับคลาส "ปัดเศษ" ด้วย toggleClass
$('.box').toggleClass('rounded');
โซลูชันอื่น ๆ เป็นเพียงการสลับระหว่างคลาส หากคุณต้องการแก้ไขอันที่มีอยู่และเพิ่ม/ลบค่าจากนั้นให้ใช้สิ่งนี้:
$('.box').css('border-radius','50px');
และเพื่อลบ:
$('.box').css('border-radius', '');
Jquery สามารถลบคลาสได้ แต่ ไม่สามารถแก้ไข CSS ใด ๆ ในคลาสได้:
$(target).addClass("myClass");
$(target).removeClass("myClass andThisOne removeSoManyClasses");
หากต้องการเขียนทับชั้นเรียนด้วยวิธีอื่น:
$("body").append("<style class='remove'>.box{/*many css*/}</style>");
$(".remove").remove();
ใช่ มันเป็นไปได้
หากต้องการเพิ่มคลาส css ไวยากรณ์คือ
$(selector).addClass(classname)
หากต้องการลบคลาส css ไวยากรณ์คือ
$(selector).removeClass(classname)
