Question

我希望我的点击事件将按钮文本从打开更改为关闭，然后将其更改为所需的四倍。

当前，我可以单击按钮，然后将文本内容更改为“重置筛选器”，然后再次单击该按钮时，该按钮将更改回每个嵌套事件侦听器的筛选器。我希望能够继续在打开和关闭状态之间切换。

我尝试了while循环和其他方法，但了解到这可能需要异步完成。

const filterBtn = document.getElementById('filter-btn');
// Event Listener to activate filter button
filterBtn.addEventListener('click', () => {
    filterBtn.textContent = "Reset Filter";
    filterBtn.addEventListener("click", () => {
        filterBtn.textContent = "Filter";
    })
});

<button id="filter-btn">Filter</button>

我希望能够继续在打开和关闭状态之间切换。

Answer 1

只需坚持一个处理程序，然后根据按钮的当前文本翻转文本。您可以为此使用三元运算符：

const filterBtn = document.getElementById('filter-btn');
filterBtn.addEventListener('click', () => {
    filterBtn.textContent = filterBtn.textContent === "Reset Filter"
        ? "Filter" : "Reset Filter";
});

<button id="filter-btn">Filter</button>

如何异步切换按钮上的单击事件

1 个答案: