Để 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 mô tả chi tiết 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> ta 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 content 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(" chúng ta không thích ảnh này");
$("a").html("Like")
}
<br>
Đến đây tôi đã hoành thành tạo cho tớ một phím chức năng Like+Unlike với content cho trước.
ta có thể download source demo về tham khảo trên máy của mình.
Dịch vụ thiết kế website chuẩn SEO Onpage: iGuru.vn
0 nhận xét:
Đăng nhận xét