0

tengo dos elementos con la clase 'stopTimer' y 'start timer' que esta dentro de un tr con un id. Tal que asi:

<tr id='1'>
    <span class='stopTimer' style="display: none;">
        fin
    </span>
    <span class='startTimer'>
        inicio
    </span>
</tr>
<tr id='2'>
    <span class='stopTimer' style="display: none;">
        fin
    </span>
    <span class='startTimer'>
        inicio
    </span>
</tr>
<tr id='3'>
    <span class='stopTimer' style="display: none;">
        fin
    </span>
    <span class='startTimer'>
        inicio
    </span>
</tr>

Pues cuando pulso start timer quiero quitar el display:none a stoptimer y ocultar el start.

El start (de todas las filas) lo he ocultado asi en el onclick:

$("#panelDoing").on("click", ".startTimer", function (event) {
    let tarea=$(this).patents("tr").attr("id");
    document.querySelectorAll('span.startTimer')
    .forEach((span)=>{
        if(this==span)return;

        span.style.display='none';
    });
});

Como podria hacer en esta misma función para mostrar SOLO el stop de esta fila?

Gracias

2 respuestas 2

1

Estás delegando correctamente el evento. Solo te hace falta buscar los respectivos elementos dentro de su contenedor.

$(this).parent().find (".startTimer").toggle(); $(this).parent().find (".stopTimer").toggle();

El método toggle muestra u oculta el elemento afectado según este sea visible u oculto.

0

Creo que la Opcion mas fácil es usar tus clases con Numerador Unico: te dejo un ejemplo con tu codigo mas sencillo:

function iniciar(id)
{
    $(".startTimer"+id).hide("slow");
  $(".stopTimer"+id).show("slow");
}
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<tr>
    <span class='stopTimer1' style="display: none;">
        fin
    </span>
    <span class='startTimer1' onclick="iniciar(1)">
        inicio
    </span>
</tr>
<tr>
    <span class='stopTimer2' style="display: none;">
        fin
    </span>
    <span class='startTimer2' onclick="iniciar(2)">
        inicio
    </span>
</tr>
<tr>
    <span class='stopTimer3' style="display: none;">
        fin
    </span>
    <span class='startTimer3' onclick="iniciar(3)">
        inicio
    </span>
</tr>

Asi es mas sencillo en Vez de Colocar ID a los TR mejor coloca a los SPAN

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.