如何筛选所有具备指定CSS类的元素并执行批量操作

问题原因 #

• HTML规范要求ID全局唯一，你在循环生成多条帖子结构时，重复使用了optionsBtn、editBtn、deleteBtn三个ID，因此document.querySelector只能匹配到页面第一个对应ID的元素，自然只能控制第一条帖子的按钮显隐。
• 你设置的全局activeTwo状态会让所有帖子的按钮同步开关，无法实现每条帖子单独控制自己的操作按钮。

解决方法 #

核心实现思路 #

1. 移除模板中所有重复的ID属性，改用类名结合DOM层级关系定位元素
2. 点击选项按钮时，从当前触发事件的按钮出发，查找它所属的帖子容器，再定位到同容器下的操作按钮，实现单条帖子独立控制
3. 你询问的按CSS类筛选所有匹配元素的方法是document.querySelectorAll(选择器)，传入类选择器即可返回所有匹配的元素节点集合，可通过forEach遍历操作每个元素。

修复后完整代码 #

function htmlHandle(data) {
    postsContainer.innerHTML = data.map(item => {
        return `
            <div class="post-container">
                <a class="a" href='/'><h3 class="author">${item.author}</h3></a>
                <div class="date">${item.date.toLocaleString()}</div>
                <!-- 移除重复的ID属性 -->
                <button class="options-btn"><i class="fas fa-ellipsis-v" style="color: gray;"></i></button>
                <button class="inside-btn invisible">Edit</button>
                <button class="inside-btn invisible">Delete</button>
                <br>
                <button class="inside-btn invisible">Delete</button>
                <p class="body-text">${item.body}</p>
            </div>
        `
    }).join('')
}

fetch('/api/data')
    .then(res => res.json())
    .then(data => {
        data.sort(function(a,b){
                return new Date(b.date) - new Date(a.date);
        })
        htmlHandle(data)
        // 移除全局按钮变量和全局状态变量
        document.addEventListener("click", e => {
            // closest兼容点击到按钮内部i标签的场景
            const optionsBtn = e.target.closest('.options-btn')
            if (optionsBtn) {
                // 找到当前点击的选项按钮所属的帖子容器
                const currentPost = optionsBtn.closest('.post-container')
                // 选中当前帖子下所有操作按钮，切换显隐类
                currentPost.querySelectorAll('.inside-btn').forEach(btn => {
                    btn.classList.toggle('invisible')
                })
            }
        })
    })

补充说明 #

如果需要批量操作所有类名匹配的元素，直接按如下写法使用即可：

// 选中所有带invisible类的元素
const allInvisibleEl = document.querySelectorAll('.invisible')
// 遍历操作每个元素
allInvisibleEl.forEach(el => {
    // 自定义操作逻辑
    console.log(el)
})

内容的提问来源于stack exchange，提问作者Justin Christopher Domingo