0

Necesito incrementar unos valores contenidos en etiquetas span y esta es la forma en la que lo hago

Esta es la parte del javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">
    $(document).on("click", ".incrementar", function(e)
    {
        var num = $(this).attr('data-value');
        $elemento = "#" + $(this).attr('data-name');
        $($elemento).html(++num);
    });
</script>

Y esta la parte del html

<?php for($i=0;$i<5;$i++): ?>
    Número <span id="number<?=$i?>" class="numeros"><?=$i?></span>
    <a href="#" class="incrementar" data-value="<?=$i?>" data-name="number<?=$i?>">Incrementar</a>
    <br>
<?php endfor; ?>

Funciona correctamente. Se me ocurrió crear el atributo "id" en el elemento span y los atributos "data-value" y "data-name" en el elmento a href, para recoger esos datos en javascript y luego incrementar el valor en uno, pero realmente este bucle for es muy pequeño y en el caso de que el bucle sea más grande, que lo será, se tendrán que crear muchos atributos data-value y data-name para recoger esos valores

¿Se podría hacer de otra manera sin tener que crear el atributo id del span y los atributos data-value y data-name del a href?

Gracias!

1 respuesta 1

1

Si, puedes coger el elemento previo, que seria el span y luego incrementar su valor

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>

<script type="text/javascript">
    $(document).on("click", ".incrementar", function(e)
    {
        const elem = $(this).prev();
        let num = parseInt(elem.text());
        elem.html(++num);
    });
</script>

<?php for($i=0;$i<5;$i++): ?>
    Número <span class="numeros"><?=$i?></span>
    <a href="#" class="incrementar">Incrementar</a>
    <br>
<?php endfor; ?>
2
  • 1
    Perfecto! ¿Pero por qué se usa const y let en lugar de poner var para crear las variables? Gracias!
    – Juaqui
    Commented el 26 jul. 2020 a las 21:06
  • 1
    let y const son dos formas de declarar variables en JavaScript introducidas en ES6, puedes leer mas en cualquier articulo. Te recomiendo este cybmeta.com/var-let-y-const-en-javascript Commented el 26 jul. 2020 a las 22:34

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.