Me gustaría incluir un botón "Me gusta" en un sitio web con un contador. Los botones Me gusta incluyen un recuento del número actual de Me gusta. Si no se hace clic, se muestra el número actual de Me gusta. Cuando se hace clic en un botón, la cantidad actual de clics aumenta en uno (y el estado o la apariencia del botón cambia), y el recuento de Me gusta debe almacenarse en la lógica del lado del servidor para almacenar y servir la cantidad de Me gusta.
¿Es posible lograr esto en HTML, CSS y Jquery?
Utilice este fragmento de código :)
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>