以下是一个示例代码,用于捕获点击事件并检查是否选择了所有工具栏按钮:
// 获取所有工具栏按钮
const toolbarButtons = document.querySelectorAll('.toolbar-button');
// 创建一个变量来跟踪选择的工具栏按钮数量
let selectedCount = 0;
// 遍历每个工具栏按钮
toolbarButtons.forEach(button => {
// 为每个按钮添加点击事件监听器
button.addEventListener('click', () => {
// 切换按钮的选中状态
button.classList.toggle('selected');
// 如果按钮被选中,则增加计数
if (button.classList.contains('selected')) {
selectedCount++;
} else {
selectedCount--;
}
// 检查是否选择了所有工具栏按钮
if (selectedCount === toolbarButtons.length) {
console.log('所有工具栏按钮都被选择了');
}
});
});
在这个示例中,我们首先获取到了所有的工具栏按钮,并创建了一个变量来跟踪选择的按钮数量。然后,我们为每个按钮添加了一个点击事件监听器。在点击事件处理函数中,我们使用classList.toggle()
方法来切换按钮的选中状态,并根据按钮的选中状态增加或减少计数。最后,我们检查计数是否等于工具栏按钮的数量,如果是,则表示所有按钮都被选择了。在这个示例中,我们使用控制台输出了一条消息,你可以根据你的需求进行相应的处理。