Hướng dẫn tạo Toggle Like and Dislike - Demo
RUN
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://freetuts.net/cnd/css/fontawesome/4.7.0/css/font-awesome.min.css"> <style> .fa { font-size: 50px; cursor: pointer; user-select: none; } .fa:hover { color: darkblue; } .active { color: darkblue; } </style> </head> <body> <div class="container"> <h2>Freetuts.net hướng dẫn tạo Toogle like and Dislike</h2> <p>Click vào icon để like hoặc dislike</p> <i id="button" class="fa fa-thumbs-up"></i> </div> </body> <script> // lấy về button var button = document.getElementById('button'); //gán sự kiện click button.addEventListener("click", function(){ //Lấy tất cả các class của button và chuyển thành chuỗi var allClass = this.classList.toString(); // kiểm tra nếu chưa tồn tại class active thì thêm class active if (allClass.indexOf('active') == -1) { this.classList += ' active'; } //Thêm hoặc xóa class fa-thumbs-down this.classList.toggle("fa-thumbs-down"); }); </script> </html>
PHÓNG TO