可以使用 tailwind CSS 操作 DOM - Vanilla JS 项目

Question

我想隐藏“标记为完成按钮”并将其替换为完成按钮，方法是替换“已完成”按钮中的“隐藏”类并将其添加到“标记为完成”按钮。但是当我尝试使用事件侦听器更新或操作 dom 时，请使用下面给出的代码。 dom 的按钮没有显示任何变化，即它似乎没有被操纵。

<div class="manager bg-white h-[70%] w-[70%] grid grid-cols-1 grid-rows-4 gap-2 shadow-2xl
             shadow-gray-500">
                <div class="grid_item_1 bg-slate-300 flex justify-start items-center">
                    <div class="status_heading">
                        <p class="status text-3xl ml-8 mr-80">
                            Name
                        </p>
                    </div>
                    <div class="name_heading">
                        <p class="name text-3xl mr-64">
                            Status
                        </p>
                    </div>
                    <div class="delete_heading">
                        <p class="delete text-3xl">
                            Delete
                        </p>
                    </div>
                </div>
                <div class="grid_item bg-red-400 flex justify-start items-center text-lg">
                    <div class="task_name ml-8 mr-64">
                        <p class="task_detail">
                            <button>Call Mom!</button>
                        </p>
                    </div>
                    <button class="Mark_complete mr-52 bg-gray-200 p-6 rounded-lg hover:scale-105">Mark as Complete</button>
                    <button class="completed mr-52 bg-green-400 p-6 rounded-lg hover:scale-105 hidden">Completed!</button>
                    <button class="Delete bg-red-500 p-6 rounded-lg hover:scale-105">Delete</button>
                </div>

其 JS 代码是：

const incompleteButton = document.querySelector(".Mark_complete");
const completedButton = document.querySelector(".completed");

incompleteButton.addEventListener("click", statusChanger, bgchange);
completedButton.addEventListener("click", statusChangerAgain);

function statusChanger() {
    if (completedButton.classList.contains("hidden")) {
        completedButton.classList.remove("hidden");
        incompleteButton.classList.add("hidden");
    }
}

function statusChangerAgain() {
    if (incompleteButton.classList.contains("hidden")) {
        incompleteButton.classList.remove("hidden");
        completedButton.classList.add("hidden");
    }
}

脚本链接和CSS链接已正确添加，因此那边没有问题

Answer 1

从该行删除 bgchange

incompleteButton.addEventListener("click", statusChanger, bgchange)

这将解决您的问题，但是您不需要重复自己，只需一个函数即可实现相同的功能，如下所示：

const incompleteButton = document.querySelector(".Mark_complete");
const completedButton = document.querySelector(".completed");

incompleteButton.addEventListener("click", statusChanger);
completedButton.addEventListener("click", statusChanger);

function statusChanger(e) {
e.target.classList.add("hidden");
  if(e.target == incompleteButton){
      completedButton.classList.remove("hidden");
  } else if(e.target == completedButton){
     incompleteButton.classList.remove("hidden");
  }
}

.hidden {
  display:none;
}

<div class="grid_item bg-red-400 flex justify-start items-center text-lg">
    <div class="task_name ml-8 mr-64">
        <p class="task_detail">
            <button>Call Mom!</button>
        </p>
    </div>
    <button class="Mark_complete mr-52 bg-gray-200 p-6 rounded-lg hover:scale-105">Mark as Complete</button>
    <button class="completed mr-52 bg-green-400 p-6 rounded-lg hover:scale-105 hidden">Completed!</button>
    <button class="Delete bg-red-500 p-6 rounded-lg hover:scale-105">Delete</button>
</div>