1

Quiero realizar contadores en cada boton que se da click, el problema es que cuando doy click en los demas botones el contador continua con el valor anterior, en vez de aumentar desde cero o desde e valor que tiene ese boton.

No quiero realizar el contador dependiendo del "id" del elemento porque son varios botones, quiero que cuando se click en ese boton aumente y si se da click en otro aumente pero no con el valor anterior.

<script type="text/javascript">
  var i = 0;
  $(document).on('click', 'button', function() {

            if (i < 20 ) { 
            i++;
            $(this).text(""+i);
        } 

            });
</script>

introducir la descripción de la imagen aquí

Este es el resultado. Lo que pretendo realizar es que el los botones tengan sus propios valores y no dependan del valor anterior de otro elemento

1
  • Si sumas sobre una misma variable no podras tener el contador por aparte, existen dos casos que se pueden hacer, crea una variable por boton y creas la función por cada botón O creas un objeto que tenga un atributo por el botón(el atributo puede ser el id del objeto jquery del botón), ambas funcionarán aunque la mas facil es la de las funciones, la mas rápida la de los atributos. Commented el 6 may. 2019 a las 16:31

1 respuesta 1

1

Puedes leer el valor actual del texto del botón e incrementar:

$(document).on('click', 'button', function() {
  let i = +$(this).text();
    if (i < 20 ) { 
      $(this).text(++i);
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button> 0 </button>
<button> 0 </button>
<button> 0 </button>
<button> 0 </button>

O, siendo más elegantes, usar un atributo data-:

$(document).on('click', 'button', function() {
  let i = +$(this).data("count");
    if (i < 20 ) { 
      $(this).text("+ " + (++i));
      $(this).data("count",i);
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-count="0"> Click me </button>
<button data-count="0"> Click me </button>
<button data-count="0"> Click me </button>
<button data-count="0"> Click me </button>

1
  • Gracias Amigo! Era justo lo que estaba buscando Commented el 6 may. 2019 a las 16:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.