2

Soy nuevo en JavaScript y tengo el siguiente problema:

<tr th:each="planificacion : ${planificaciones}"
        th:onclick="'window.location.href = \'' + @{/planificacion/{idp}(idp=${planificacion.id})}+ '\''">

    <td th:text="${planificacion.nombre}"></td>
    <td>
        <div th:if="${planificacion.completado}">
            <span class="badge badge-pill badge-success"
                    style="font-size: 80%; padding: 6px 18px;">Completo</span>
        </div>
        <div th:if="${not planificacion.completado}">
            <span class="badge badge-pill badge-danger"
                    style="font-size: 80%; padding: 6px 18px;">Incompleto</span>
        </div>
    </td>
    <td>
        <div class="progress">
            <div id="dynamic"
                    class="progress-bar progress-bar-success progress-bar-striped active"
                    role="progressbar" aria-valuenow="0" aria-valuemin="0"
                    aria-valuemax="100" style="width: 0%">
                <span id="current-progress"></span>
            </div>
        </div>
    </td>

Y el siguiente script:

<script>
    $(function() {
        var current_progress = document.getElementById("progreso").value;
        var interval = setInterval(function() {

            $("#dynamic").css("width", current_progress + "%").attr(
                    "aria-valuenow", current_progress).text(
                    current_progress + "%");

        }, 1000);
    });
</script>

Al hacer lo que me respondió Pablo he hecho esto:

<td>
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped active"
                                role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                aria-valuemax="100" style="width:0%">
                                <span id="current-progress"></span>
                            </div>
                        </div>
                    </td>
                    <td><a class="btn btn-danger"
                        th:href="@{/borrar_planificacion/{id}(id=${planificacion.id})}">
                            <i class="fas fa-trash-alt"></i>
                    </a></td>

                    <input class="progreso" type="hidden"
                        th:value="${planificacion.porcentaje}">

<script>
$(function() {
    var progreso = document.getElementsByClassName('progreso');
        for (i = 0; i < progreso.length; i++) {
        $(".progress-bar.active").css("width", progreso[i].value + "%").attr(
                "aria-valuenow", progreso[i].value).text(
                        progreso[i].value + "%");
        }


});

Ahora me sale el mismo valor en todas las barras de progreso, y quiero que cada barra tenga el valor de {planificacion.porcentaje}

1 respuesta 1

5

El atributo id de cualquier elemento HTML debe ser único. Si creas N elementos con el mismo id, tanto jQuery como document.getElementById devolverán el primero que encuentren en la página, asumiendo que no hay más.

Si quieres aplicar lo que sea a varios elementos, usa una clase.

En tu ejemplo, podrías hacer algo como

$('.progress-bar.active'). ...

en lugar de

$("#dynamic"). ...
1
  • Muchas gracias! ahora el problema que tengo es que todas las barras aparecen con el mismo valor: <script> $(function() { var progreso = document.getElementsByClassName('progreso'); for (i = 0; i < progreso.length; i++) { $(".progress-bar.active").css("width", progreso[i].value + "%").attr( "aria-valuenow", progreso[i].value).text( progreso[i].value + "%"); } }); </script> el 18 dic. 2018 a las 17:25

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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