Question

我有一个很长的div列表，每个列表都有一个具有相同类名的按钮，该按钮用于使表单出现并提示用户添加新任务。为此，我需要将任务添加到的正确列表ID。由于该表单是div的外部形式，因此该表单只能包含一个全局列表列表，因此我不知道该任务的附加对象。

这是显示所有列表的HTML

<?php foreach($Liste as $lista) :?>


    <div class="list-container">
        <h1><?= $lista->getNome() ?></h1>

        <div class="tasks">
            <?php $compiti=$lista->loadCompiti();

            ?>
            <?php foreach($compiti as $compito) :?>
                <div class="task-container">
                    <h3 class="task-title"><?=$compito->getNome() ?></h3>
                    <p> Due date: <?=$compito->getDueDate()?></p>
                </div>
            <?php endforeach; ?>

        </div>

        <button class="addTask">Add Task</button>
    </div>

<?php endforeach; ?>

这是在列表之一中单击“添加任务”时出现的提示

<div class="appear hide " id="taskAdder">
    <button class="hideB" id="hideBTN">X</button>

    <form action="/task/add" method="post">
        <input type="text" name="NomeTask" placeholder="Task name">
        <input type="text" name="dueDate" placeholder="date" >
        <textarea name="desc" placeholder="description" rows="4" cols="50"></textarea>
        <button type="submit">Create</button>
    </form>
</div>

这是在此后面运行的js

let form = document.getElementById('form');
let button= document.getElementById('prompt');
let hide = document.getElementById('hideBTN');


let tasksBTN=document.getElementsByClassName('addtask');
let taskAdder=document.getElementById('taskAdder');

for(let i=0; i<tasksBTN.length; i++){
    tasksBTN[i].addEventListener('click', ()=>appear());
}

button.onclick=function () {
    form.classList.remove('hide');

};



hide.onclick=function () {

    form.classList.add('hide');
};

function appear() {
    taskAdder.classList.remove('hide');
}

Answer 1

您的事件处理程序可以接受一个参数，使您可以访问被单击的按钮。然后，您可以检查其ID或在DOM中的位置，以确定它是哪个按钮。

您的循环：

for(let i=0; i<tasksBTN.length; i++){
    tasksBTN[i].addEventListener('click', ()=>appear());
}

成为：

for(let i=0; i<tasksBTN.length; i++){
    tasksBTN[i].addEventListener('click', appear);
}

处理程序：

function appear() {
    taskAdder.classList.remove('hide');
}

成为：

function appear(e) {
    e.target.classList.remove('hide');
}

javascript addEventListeners

1 个答案: