Trong bài viết này tôi sẽ hướng dẫn các bạn tạo phím chức năng like+unlike bằng jquery và câu điều kiện if else
Để bắt đầu với bài này tôi sẽ đặt ra một câu hỏi cho các bạn:1. Làm sao để khi tôi nhấn vào phím like thì icon like sẽ hiện ra và xuất ra dòng văn bản báo hiệu bạn đã thích nội dung đó và đồng thời phím chức năng like sẽ thay thế bằng unlike
2. Khi ta nhấn và phín unlike thì icon unlike sẽ hiện ra và xuất ra dòng văn bản báo rằng bạn không thích nội dung đó đồng thời phím chức năng like sẽ thay đổi phím chức năng unlike
Chúng ta bắt đầu với đoạn mã HTML sau với nội dung là một hình ảnh :
1
2
3
4
| <h3>Cosplay nàng Bích Dao xinh như búp bê</h3><img src="images/bichdao.jpg" width="350px" height="500px" /><a href="#">Like</a><p>Bạn sẽ thích ảnh này chứa?</p> |
Tôi sẽ CSS một chút để trang web trông ngay ngắn hơn :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| body{ width: 350px; margin: 0px auto;}a{ text-decoration: none;}a:hover{ color: red; text-decoration: underline; text-indent: } |
Làm việc với jquery.
Khai báo biến đếm var i = 1.
Dùng hàm sự kiện click(function() {...}); khi tôi nhấp chuột vào thẻ a. Cứ sau mỗi lần nhấp chuột biến đếm i sẽ tăng 1 giá trị : i = i++.
Nếu biến đếm i chia hết cho 2 tức là tôi đã click số lẻ lần vào thẻ a hay nói cách khách tôi đã thích nội dung đó.
Nếu biến đếm i không chia hết cho 2 tức là tôi đã click số chẳn lần vào thẻ a hay tôi đã không thích nội dung đó.
Tôi sử dụng câu điều kiện
1
2
3
4
5
| if ( i % 2 == 0 ) { \\code... } else { \\code..} |
Để thể hiện cho việc trên và đồng thời dùng hàm css() và html() để tùy biến lại nội dung cho thẻ p và a.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| if ( i % 2 == 0 ) { $("p").css({ "background": "url('images/like.png') no-repeat", "text-indent": "20px", }) $("p").html("Bạn đã thích ảnh này"); $("a").html("Unlike")} else { $("p").css({ "background": "url('images/unlike.png') 0% 100% no-repeat", "text-indent": "20px", }) $("p").html("Bạn không thích ảnh này"); $("a").html("Like")}<br> |
0 nhận xét:
Đăng nhận xét