Like Button with counters using html css & jquery
Question
I'd like to include a "like" button on a website with a counter. The like buttons include a tally for the current number of likes. If it is not clicked, the current number of likes is displayed. When a button is clicked, the current number of clicks is increased by one (and the button's state or appearance changes), and the like count should be stored on server-side logic to store and serve the number of likes.
Is it possible to achieve this in HTML, CSS, and Jquery?
1 answers
solution1
0 2022-06-06 07:53:00
Use this code snippet :)
let likes = 0; $(document).ready(function () { // ajax to get current likes // let likes from server are 10 // assign the current likes to variable likes = 10; setLikes(likes); }); $("body").on("click", ".likeBtn", function () { // ajax to post a current likes // in success add increment to likes likes++; setLikes(likes); }); function setLikes(count) { $(".totalLikes").text(count); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Likes Counter</title> </head> <body> <button class="likeBtn"> Like (<span class="totalLikes">0</span>) </button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.