如何实现筛选选中项在指定区域的动态展示与状态重置

需求说明 #

• 页面加载完成后，<div id="choice">区域显示全部选项
• 点击带有data-control属性的筛选按钮选中特定分类时，<div id="choice">仅展示对应选中项
• 取消筛选选择后，该区域恢复显示全部选项

现有代码 #

HTML

<div>
  <ul>
    <li>
      <button class="_active" data-control=".all">all</button>
    </li>
    <li>
      <button data-control=".a">a</button>
    </li>
    <li>
      <button data-control=".b">b</button>
    </li>
    <li>
      <button data-control=".c">c</button>
    </li>
  </ul>
  <div class="show-choice">
    <div id="choice">
      <span>a 1, b 2, a b 3, b 4, a 5, c 6</span>
    </div>
  </div>
</div>
<div class="list">
  <div class="all a">a 1</div>
  <div class="all b">b 2</div>
  <div class="all a b">a b 3</div>
  <div class="all b">b 4</div>
  <div class="all a">a 5</div>
  <div class="all c">c 6</div>
</div>

CSS

ul,
li {
  list-style: none;
  display: inline-block;
}

button {
  padding: 10px;
}

button:hover {
  color: green;
}

button._active {
  color: tomato;
}

.list>div {
  background: grey;
  margin-bottom: 10px;
  color: #fff;
  padding: 10px;
}

._hidden {
  display: none;
}

.show-choice {
  width: max-content;
  border: 1px solid red;
  padding: 10px;
  margin: 0 0 20px;
}

JavaScript

document.querySelectorAll('[data-control]').forEach(item => {
  item.addEventListener('click', event => {
    event.preventDefault();
    handleFilterItems(item);
  });
});

function handleFilterItems(filterItem) {
  if (filterItem.getAttribute('data-control') === '' || filterItem.getAttribute('data-control') === '.all') {
    document.querySelectorAll('[data-control]').forEach(item => {
      item.classList.remove('_active');
    });
  } else {
    document.querySelector('[data-control=".all"]').classList.remove('_active');
  }
  if (filterItem.classList.contains('_active')) {
    filterItem.classList.remove('_active');
    // 检查是否没有其他激活的筛选按钮
    if (!document.querySelectorAll('[data-control]._active').length) {
      document.querySelector('[data-control=".all"]').classList.add('_active');
    }
  } else {
    filterItem.classList.add('_active');
  }
  handleFilterTeaser();
}

function handleFilterTeaser() {
  document.querySelectorAll('.all').forEach(item => {
    item.classList.add('_hidden');
  });
  if (document.querySelectorAll('[data-control]._active').length === 0) {
    document.querySelectorAll('.all').forEach(item => {
      item.classList.remove('_hidden');
    });
  } else {
    document.querySelectorAll('[data-control]._active').forEach(item => {
      let filterTag = item.getAttribute('data-control');
      document.querySelectorAll(filterTag).forEach(tag => {
        tag.classList.remove('_hidden');
      });
    });
  }
}

修改方案 #

要实现<div id="choice">区域的联动筛选，需要对代码做以下调整：

1. 拆分HTML结构

将#choice内的文本拆分为单个可控制的元素，给每个选项添加与下方列表对应的类名：

<div class="show-choice">
  <div id="choice">
    <span class="choice-item all a">a 1</span>, 
    <span class="choice-item all b">b 2</span>, 
    <span class="choice-item all a b">a b 3</span>, 
    <span class="choice-item all b">b 4</span>, 
    <span class="choice-item all a">a 5</span>, 
    <span class="choice-item all c">c 6</span>
  </div>
</div>

2. 补充CSS样式

添加.choice-item的基础样式，确保隐藏类生效：

.choice-item {
  display: inline;
}

3. 更新筛选逻辑

修改handleFilterTeaser函数，同时处理列表区域和#choice区域的显示/隐藏：

function handleFilterTeaser() {
  // 初始化隐藏所有列表项和choice项
  document.querySelectorAll('.all').forEach(item => {
    item.classList.add('_hidden');
  });
  document.querySelectorAll('.choice-item').forEach(item => {
    item.classList.add('_hidden');
  });

  if (document.querySelectorAll('[data-control]._active').length === 0) {
    // 无激活筛选时，显示全部内容
    document.querySelectorAll('.all').forEach(item => {
      item.classList.remove('_hidden');
    });
    document.querySelectorAll('.choice-item').forEach(item => {
      item.classList.remove('_hidden');
    });
  } else {
    // 根据激活的筛选标签，显示对应内容
    document.querySelectorAll('[data-control]._active').forEach(item => {
      let filterTag = item.getAttribute('data-control');
      // 显示列表对应项
      document.querySelectorAll(filterTag).forEach(tag => {
        tag.classList.remove('_hidden');
      });
      // 显示choice对应项
      document.querySelectorAll(`.choice-item${filterTag}`).forEach(tag => {
        tag.classList.remove('_hidden');
      });
    });
  }
}

内容的提问来源于stack exchange，提问作者Слава Грачев