jQuery - Incremente el valor de un contador cuando se hace clic en un botón

Estoy creando un sistema donde un usuario hace clic en un botón y aumenta su puntaje. Hay un contador que me gustaría aumentar el valor de usar jQuery (para que la página no necesite actualizar) cuando se hace clic en el botón.jQuery - Incremente el valor de un contador cuando se hace clic en un botón

¿Cómo podría hacerlo?

<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 también actualiza el valor de la puntuación en una base de datos mysql, sin refrescar la página. ¿Alguien sabe cómo haría eso?

Muchas gracias

ACTUALIZACIÓN:

He probado unos pocos de los siguientes métodos, pero nada parece funcionar! ¿Debo cambiar algo 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>

Fuente

2011-01-15 Taimur

* # contador es el contador *: ¿Es un elemento que contiene un número o qué? –

sí, #counter es un div con un número dentro de – Taimur

@Taimur su código no es válido. Finalice su función de clic con '});' y no solo '}'. ** DEMO: ** http://jsfiddle.net/marcuswhybrow/Bwdfw/ –

No se puede utilizar ++ 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 });

jQuery de html() método 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í, en el contexto de su código:

$("#update").click(function() { 
    $('#counter').html(function(i, val) { return +val+1 }); 
}

DEMO:http://jsfiddle.net/marcuswhybrow/zRX2D/2/

Cuando se trata de la sincronización de 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 cambie el código 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; 
    }); 
}

Fuente

2011-01-15 18:24:48

Esto funciona bien en la demostración, pero por alguna razón, no está funcionando en mi página. De hecho, ninguna de las respuestas es! ¿Hay algo que me falta? – Taimur

Gracias por la respuesta, con respecto a lo AJAX, ¿cómo sabe si la función ha sido un éxito? Además, ¿qué hace (i, val)? Gracias – Taimur

@Marcus Considere '+ val + 1' en lugar de' val * 1 + 1' –

$(document).ready(function() { 
var count = 0; 

    $("#update").click(function() { 
    count++; 
    $("#counter").html("My current count is: "+count); 
    } 

}); 

<div id="counter"></div>

Fuente

2011-01-15 18:24:29 jpea

necesitaba agregar la función de listo para el documento antes de activar cualquier código jQuery (editado arriba) – jpea

es sólo

var counter = 0; 

$("#update").click(function() { 
    counter++; 
});

Fuente

2011-01-15 18:24:55 Vadim

Usted está tratando de establecer "++" en un elemento de jQuery!

usted podría declarar una variable de js

var counter = 0;

y en el código de jQuery hacer:

$("#counter").html(counter++);

Fuente

2011-01-15 18:25:21 stecb

¿Debería crear una variable global? De Verdad? –

"DEBERÍAS";) no "DEBES" ... sería mejor "podrías" ... vamos, hay varias formas de hacerlo, ¡es solo una sugerencia! – stecb

Sí, "podría" es la forma correcta aquí. "Deberías" es para recomendaciones. Y nadie debería recomendar la creación de variables globales, la recomendación aquí es la opuesta: uno debe tratar de evitar la creación de variables globales. –

Varias de las sugerencias anteriores de uso de variables globales. Esta no es una buena solución para el problema.El recuento es específico de un elemento, y se puede utilizar la función de jQuery data para unir un elemento de datos a un elemento:

$('#counter').data('count', 0); 
$('#update').click(function(){ 
    $('#counter').html(function(){ 
     var $this = $(this), 
      count = $this.data('count') + 1; 

     $this.data('count', count); 
     return count; 
    }); 
});

Tenga en cuenta también que este utiliza la sintaxis de devolución de llamada de html para hacer el código más fluido y rápido .

Fuente

2011-01-15 18:31:44 lonesomeday

No es cierto si hay más de una forma de cambiar el valor del recuento – jcuenod

@ j3frea Luego, encapsule el código en un complemento. Honestamente, esto no es difícil de hacer, y ensuciar su código con variables globales es un mal diseño. – lonesomeday

Nadie está usando variables globales, solo son ejemplos. El contexto no se menciona en ninguna respuesta. –

voy a probar esto de la siguiente manera. Coloqué la variable de conteo dentro de la función "onfocus" para evitar que se convierta en una variable global. La idea es crear un contador para cada imagen en un blog tumblr.

$(document).ready(function() { 

    $("#image1").onfocus(function() { 

    var count; 

    if (count == undefined || count == "" || count == 0) { 
    var count = 0; 
    } 

    count++; 
    $("#counter1").html("Image Views: " + count); 
    } 
});

Entonces, fuera de las etiquetas de secuencia de comandos y en el lugar deseado en el cuerpo Voy a añadir:

<div id="counter1"></div>

Fuente

2013-06-25 21:44:14

ir al sitio de abajo y puesta a punto. http://www.counter12.com/

Desde el enlace de arriba He seleccionado un diseño que me ha gustado tener en mi sitio acepta los términos y me ha dado un div que he pegado en mi página html.

Se hizo impresionantemente trabajó.

yo no estoy respondiendo a su problema en jQuery, pero que le da una solución alternativa para su problema.

Fuente

2015-07-30 15:13:20 Anil

jQuery - Incremente el valor de un contador cuando se hace clic en un botón

Respuesta

Cuestiones relacionadas