Estoy creando un sistema en el que un usuario hace clic en un botón y su puntuación aumenta. Hay un contador que me gustaría aumentar el valor de usar jQuery (para que la página no necesite actualizarse) cuando se hace clic en el botón.
¿Cómo haría esto?
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script type="text/javascript"> $("#update").click(function() { $("#counter")++; } </script>#update es el botón, #counter es el contador.
En php, ++ aumenta el valor de algo. ¿Cuál es el equivalente de jQuery?
Además, cuando se hace clic en el botón, debe enviar una solicitud que actualice el valor de la puntuación en una base de datos mysql, sin que la página se actualice. ¿Alguien sabe cómo haría eso?
Muchas gracias
ACTUALIZAR:
Probé algunos de los métodos a continuación, ¡pero nada parece funcionar! ¿Tengo que cambiar algo más para que funcione? He creado una página de prueba para ello:
<html> <body> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script type="text/javascript"> var count = 0; $("#update").click(function() { count++; $("#counter").html("My current count is: "+count); } </script> <button id="update" type="button">Button</button> <div id="counter">1</div> </body> </htlm>No puede usar ++ en algo que no es una variable, esto sería lo más cercano que puede obtener:
$('#counter').html(function(i, val) { return +val+1 }); El método html() de jQuery puede obtener y establecer el valor HTML de un elemento. Si se pasa una función, puede actualizar el HTML en función del valor existente. Así que en el contexto de su código:
$("#update").click(function() { $('#counter').html(function(i, val) { return +val+1 }); }DEMOSTRACIÓN: http://jsfiddle.net/marcuswhybrow/zRX2D/2/
Cuando se trata de sincronizar su contador en la página, con el valor del contador en su base de datos, ¡nunca confíe en el cliente! Envía una señal de incremento o decremento a su secuencia de comandos del lado del servidor, en lugar de un valor continuo como 10 o 23.
Sin embargo, puede enviar una solicitud AJAX al servidor cuando cambia el HTML de su contador:
$("#update").click(function() { $('#counter').html(function(i, val) { $.ajax({ url: '/path/to/script/', type: 'POST', data: {increment: true}, success: function() { alert('Request has returned') } }); return +val+1; }); }$(document).ready(function() { var count = 0; $("#update").click(function() { count++; $("#counter").html("My current count is: "+count); } }); <div id="counter"></div>es solo
var counter = 0; $("#update").click(function() { counter++; });