Javascript Click to add class (Click để thêm class) cho blogger và ứng dụng

Bài viết này nằm trong Serie Javascript Blogger.

Trong các bài viết trước đây mình đã chia sẻ một số javascript

Hôm nay mình hướng dẫn một Javascript mới là click thể thêm class/id và cách mình ứng dụng nó vào lập trình web.

Cách ứng dụng Click to add class

DEMO trên trang web: https://www.tinhdauonline.com.vn
Click to add class áp dụng cho trang web tinhdauonline.com.vn

Đoạn Javascript Click to add class như sau:

<script>
$(document).ready(function(){
$(".addcart2,.view_lft").click(function(){
$(".dachon,#s0").addClass("showtext");
});
});
</script>

Cách hoạt động của Javascript Click to add class

Khi Click chuột vào Class .addcart2 hoặc.view_lft thì Javascript sẽ tìm Class .dachon và #s0 và thêm cho nó class showtext. Nếu có nhiều class bạn ngăn cách nó bằng dấu phẩy (,)

Bước 1: Đầu tiên mình sẽ viết CSS cho class showtext vừa thêm

.showtext{box-shadow: 0 0 0 0 #dee0de;animation: pulse2 1.5s infinite;display: flow-root}
@-webkit-keyframes pulse2{0%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}70%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);box-shadow:0 0 0 50px rgba(90,153,212,0)}100%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);box-shadow:0 0 0 0 rgba(90,153,212,0)}}

Mình viết cho nó 1 animation (hiệu ứng) và đặt tên là pulse2. Hiệu ứng này nôm na na như "tỏ ánh hào quang" để gây sự chú ý vậy ^^. Mình dùng màu xám có mã màu #dee0de

Bước 2: Xác định Class hoặc Id click vào

Mình muốn khi KH click vào nút "Cho Vào Giỏ Hàng" ô sản phẩm và "Thêm Vào Giỏ Hàng" ở phần bài viết và xác định được 2 Class là .addcart2 hoặc.view_lft

Bước 3: Xác định Class/id thêm Class

Ở đây mình xác định được 2 Class là .dachon,#s0

.dachon(display:none) : Ẩn, Không hiệu ứng
#s0: Không có hiệu ứng

Khi click vào "Cho Vào Giỏ Hàng" ô sản phẩm và "Thêm Vào Giỏ Hàng" nó sẽ thêm class .showtext mà mình đã viết CSS trước đó là dùng display: flow-root để hiện ẩn class .dachon và đồng thời tạo cho .dachon,#s0 hiệu ứng "Hào Quang".

Cuối cùng ta thu được đoạn Code (Javascript + CSS)

<script>
$(document).ready(function(){
$(".addcart2,.view_lft").click(function(){
$(".dachon,#s0").addClass("showtext");
});
});
</script>
<style>
.showtext{box-shadow: 0 0 0 0 #dee0de;animation: pulse2 1.5s infinite;display: flow-root}
@-webkit-keyframes pulse2{0%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}70%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);box-shadow:0 0 0 50px rgba(90,153,212,0)}100%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);box-shadow:0 0 0 0 rgba(90,153,212,0)}}
.dachon{clear:both;display:none; background: #3e8049; z-index: 9999; text-align: center; color: #fff;font: 600 12px roboto; padding: 5px 5px 5px; border-radius: 14px;}
</style>

Thêm đoạn code trên vào trước thẻ đóng /body

Lưu ý: Javascript trên chỉ có tác dụng click 1 lần để add class. Không có chức năng click năng click lần nữa để remove class.