筛选弹窗开发问题：选中分类后替换blog-filter内All为选中分类名

安全阿岳

2026-10-2

你只需要修改现有JS代码，在分类点击事件的回调中新增顶部文本更新逻辑即可，同时优化原有active类切换的范围，避免误操作顶部的筛选按钮样式。

修改后的完整JS代码

$('.js-filter-blog-list').on('click', event => {
  const modalFilter = document.querySelector('.blog-filter-container');
  $(modalFilter).toggleClass('open');
});

document.querySelectorAll('.blog-filter-container .blog-filter_item').forEach(el => {
  el.addEventListener('click', () => {
    // 只切换弹窗内的选中状态，避免影响顶部按钮
    document
      .querySelector('.blog-filter-container .blog-filter_item.active')
      .classList.remove('active');
    el.classList.add('active');

    // 新增：更新顶部显示的选中分类名
    let selectedText = el.textContent.trim();
    // 如果你不需要显示分类后面的文章数量，就用下面这行替换上面的
    // let selectedText = el.textContent.replace(/\s*\(\d+\)$/, '').trim();
    document.querySelector('.blog-filter .js-filter-blog-list').textContent = selectedText;

    var dataFilter = $(el).attr('data-filter');
    if (dataFilter == 'all') {
      $('.blog-list').show();
    } else {
      $('.blog-list').hide();
      $(dataFilter).show();
    }
    // 选中后自动关闭弹窗（可选，如果你需要的话可以打开注释）
    // $('.blog-filter-container').removeClass('open');
  });
});