JavaScript如何实现点击按钮仅展示带bookmarkChecked类的激活区块

实现方案 #

1. 新增页脚控制按钮 #

在页脚DOM结构中添加筛选按钮：

<footer>
  <button id="filterBookmarkBtn">仅查看已收藏章节</button>
</footer>

2. 新增隐藏样式 #

在CSS文件中添加章节隐藏类：

.section-hide {
  display: none !important;
}

如需保留文档流占位，可将display: none替换为visibility: hidden或opacity: 0

3. 新增筛选逻辑 #

在现有JS代码末尾补充以下逻辑：

const filterBtn = document.querySelector('#filterBookmarkBtn')
const allSections = document.querySelectorAll('.main__section')
let isFilterMode = false

filterBtn.addEventListener('click', () => {
  isFilterMode = !isFilterMode
  filterBtn.innerText = isFilterMode ? '展示全部章节' : '仅查看已收藏章节'

  allSections.forEach(section => {
    const currentBookmark = section.querySelector('.pictureBook')
    if (isFilterMode) {
      currentBookmark.classList.contains('bookmarkChecked') 
        ? section.classList.remove('section-hide') 
        : section.classList.add('section-hide')
    } else {
      section.classList.remove('section-hide')
    }
  })
})

可选优化 #

如果需要页面刷新后保留收藏状态，可将每个书签的选中状态存入localStorage，页面初始化时读取状态赋值对应DOM即可。

内容的提问来源于stack exchange，提问作者Malte1983