-1

Tenho uma aplicação que lista tarefas cadastradas para cada usuário, e isso está em um loop while PHP que possui um fetch array com o mySQL para criar a lista. O problema está no botão que expande a div de tarefas, que usa Jquery, e está funcionando só com a primeira tarefa listada.

<?php
    while ($user_tasks = mysqli_fetch_array($query_tasks)) {
        $task_name = $user_tasks["taskName"];
        $task_desc = $user_tasks["taskDesc"];
        $task_createDate = $user_tasks["taskCreateDate"];
        $task_date = $user_tasks["taskDate"];
        $task_important = $user_tasks["isImportant"];
        $task_icon = $user_tasks["taskIcon"];
?>
<div class="shadow p-4 mb-3 div-home div-tasks div-dark-mode">
    <p>
        <div class="div-header">
            <i class="fad fa-tasks fa-2x"></i>
            <a id="btn-open-task"><i class="fas fa-angle-down fa-2x angle-task"></i></a>
        </div>
    </p>
    <div class="div-header">
        <div class="task-important"></div>
    </div>
    <div class="div-opts-task" id="div-opts-task">
        <br>
        <h6 class="text-muted font-weight-light">Criada em <?php echo $task_createDate ?> </h6> <!-- 99/09/9999 às 00:00 -->
        <div class="form-row text-center">
            <div class="col">
                <button class="btn-first btn-dark-first" type="button"><i class="fad fa-edit"></i> &nbspEditar</button>
            </div>
            <div class="col">
                <button class="btn-third btn-dark-third" type="button"><i class="fad fa-eye"></i> &nbspExpandir</button>
            </div>
            <div class="col">
                <button class="btn-second btn-dark-second" type="button"><i class="fad fa-trash"></i> &nbspDeletar</button>
            </div>
        </div>
        <hr>
    </div>
    </p>
    <h4><b><?php echo $task_name ?></b></h4>
    <p>
        <h6 class="text-muted font-weight-normal">Em <?php echo $task_date ?></h6> <!-- 99/09/9999 - 00:00 até 99:00 -->
    </p>
</div>
<?php 
    }
?>
<script type="text/javascript">
    $('#btn-open-task').on('click', function() {
        $('#div-opts-task').slideToggle('fast');
        $(".angle-task").toggleClass('flip');
    });
</script>

A parte do final no script representa o Jquery, o .angle-task é o icone do Fon Awasome que representa o toggle de abertura.

Se alguém puder dar uma luz ai... :)

1 Resposta 1

1

O primeiro problema é que você está usando um id(id="btn-open-task") como seletor no seu botão, ids não podem se repetir, então mude para uma classe, pode ser com o mesmo nome. O caminho para seu problema é usar o this, pode entender melhor aqui: http://wbruno.com.br/jquery/afinal-e-javascript/.

<script type="text/javascript">
    $('.btn-open-task').on('click', function(){
        // Armazena o objeto clicado
        var $this = $(this);
        // Aqui pega a div(.div-tasks) mais próxima na hieraquia e procura pela div(.div-opts-task)
        $this.closest('.div-tasks').find('.div-opts-task').slideToggle('fast')
        // Procura dentro do botão clicado a tag i(.angle-task); 
        $this.find(".angle-task").toggleClass('flip');
    });
</script>

Se você der um console.log($this) você verá que essa variável contém o caminho absoluto do seu seletor, tornando ele único em relação ao seu código, volto a repetir o cuidado com os ids, eles não podem se repetir, são identificadores únicos, e no caso de loop ele não funciona como seletor.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .