如何使用 HTML+CSS div 创建可搜索的过滤器选项？答案

【问题标题】：How to create searchable filter options with HMTL+CSS divs?如何使用 HTML+CSS div 创建可搜索的过滤器选项？
【发布时间】：2021-01-15 10:17:25
【问题描述】：

如何启用使用过滤器 DIV 元素选择多个过滤器元素的选项？希望构建一个功能，使您能够单击框并根据所选框的组合进入另一个页面。

我已经包含了一些示例代码的副本来演示我目前拥有的内容 - 简单的过滤器选择，目前还没有添加任何链接。

filterSelection("all")

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

.filterDiv {
  float: left;
  background-color: #2196F3;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}


/* Style the buttons */

.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}

<h2>Filter DIV Elements</h2>

<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('cars')"> Cars</button>
  <button class="btn" onclick="filterSelection('animals')"> Animals</button>
  <button class="btn" onclick="filterSelection('fruits')"> Fruits</button>
  <button class="btn" onclick="filterSelection('colors')"> Colors</button>
</div>

<div class="container">
  <div class="filterDiv cars">BMW</div>
  <div class="filterDiv colors fruits">Orange</div>
  <div class="filterDiv cars">Volvo</div>
  <div class="filterDiv colors">Red</div>
  <div class="filterDiv cars animals">Mustang</div>
  <div class="filterDiv colors">Blue</div>
  <div class="filterDiv animals">Cat</div>
  <div class="filterDiv animals">Dog</div>
  <div class="filterDiv fruits">Melon</div>
  <div class="filterDiv fruits animals">Kiwi</div>
  <div class="filterDiv fruits">Banana</div>
  <div class="filterDiv fruits">Lemon</div>
  <div class="filterDiv animals">Cow</div>
</div>

我目前正在使用简单的基于 DIV 的示例，但如果有更好的方法可以用最少的后端经验来做到这一点，请告诉我。如果 Javascript 是更好的选择，我将如何编写它？任何帮助都会很棒。

【问题讨论】：

错了。摆脱 w3AddClass 和 w3RemoveClass 并改用 element.classList .add .remove .replace .toggle，或者，因为您使用的是 jQuery，所以使用 addClass 和 removeClass。您可能会从一些过时的参考/教程中获取资源和提示。

标签： php html jquery css filter

【解决方案1】：

您可以跟踪数组中的所有活动过滤器，并根据它为用户选择下一页。

在下面的示例中，所有有源过滤器都存储在activeFilters 变量中。您可以查看此数组的内容，并在更改时执行您的逻辑来显示/隐藏某些内容。

let $filter = document.querySelector('#myBtnContainer');
let $btns = $filter.querySelectorAll('.btn');
let $container = document.querySelector('#container');
let $items = $container.querySelectorAll('.filterDiv');
let $chosenFilters = document.querySelector('#chosen-filters');

let activeFilters = ['all'];

init()

function init() {
  activateItems();
  activateBtns();
  updateChosenFiltersContent();
  
  $btns.forEach(btn => btn.addEventListener('click', onClickBtn))
}

function isAllFilter() {
  return activeFilters.length === 1 && activeFilters[0] === 'all';
}

function activateFilter(name) {
  if (isAllFilter() || name === 'all') {
    activeFilters = [name]
    return;
  }

  if (activeFilters.includes(name)) {
    activeFilters = activeFilters.filter(fName => fName !== name);
  } else {
    activeFilters.push(name)
  }
}

function activateItems() {
  $items.forEach(item => {
    deactivateItem(item);
    activeFilters.forEach(filterName => {
      if (filterName === 'all') {
        activateItem(item);
        return
      }

      if (item.matches(`.${filterName}`)) {
        activateItem(item);
      }
    })
  });
}

function activateBtns() {
  $btns.forEach(btn => {
    deactivateItem(btn, 'active');
    let name = btn.dataset.name;
    if (activeFilters.includes(name)) {
      activateItem(btn, 'active')
    }
  })
}

function activateItem(item, className = 'show') {
  item.classList.add(className)
}

function deactivateItem(item, className = 'show') {
  item.classList.remove(className)
}

function updateChosenFiltersContent(){
  $chosenFilters.innerHTML = activeFilters.join(',')
}


function onClickBtn(e) {
  let name = e.target.dataset.name;
  activateFilter(name);
  activateItems();
  activateBtns();
  updateChosenFiltersContent();
}

.filterDiv {
  float: left;
  background-color: #2196F3;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}


/* Style the buttons */

.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}

<h2>Filter DIV Elements</h2>

<div id="myBtnContainer">
  <button class="btn" data-name='all'> Show all</button>
  <button class="btn" data-name='cars'> Cars</button>
  <button class="btn" data-name='animals'> Animals</button>
  <button class="btn" data-name='fruits'> Fruits</button>
  <button class="btn" data-name='colors'> Colors</button>
</div>

<div class="container" id="container">
  <div class="filterDiv cars">BMW</div>
  <div class="filterDiv colors fruits">Orange</div>
  <div class="filterDiv cars">Volvo</div>
  <div class="filterDiv colors">Red</div>
  <div class="filterDiv cars animals">Mustang</div>
  <div class="filterDiv colors">Blue</div>
  <div class="filterDiv animals">Cat</div>
  <div class="filterDiv animals">Dog</div>
  <div class="filterDiv fruits">Melon</div>
  <div class="filterDiv fruits animals">Kiwi</div>
  <div class="filterDiv fruits">Banana</div>
  <div class="filterDiv fruits">Lemon</div>
  <div class="filterDiv animals">Cow</div>
</div>

<h3>Chosen filters</h3>
<div id='chosen-filters'></div>

【讨论】：

【解决方案2】：

考虑以下示例。

$(function() {
  function filterClass(obj) {
    $(".filterDiv").show();
    if (obj == undefined) {
      return false;
    }
    $(".filterDiv").hide();
    obj.each(function() {
      $("." + $(this).text().toLowerCase()).show();
    });
  }

  $("#myBtnContainer .btn").click(function() {
    if ($(this).text() == "Show All") {
      $(".btn").removeClass("active");
      $(this).addClass("active");
      filterClass();
    } else {
      $(".btn:eq(0)").removeClass("active");
      $(this).toggleClass("active");
      filterClass($(".active"));
    }
  });
});

.filterDiv {
  float: left;
  background-color: #2196F3;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}


/* Style the buttons */

.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Filter DIV Elements</h2>

<div id="myBtnContainer">
  <button class="btn active">Show All</button>
  <button class="btn">Cars</button>
  <button class="btn">Animals</button>
  <button class="btn">Fruits</button>
  <button class="btn">Colors</button>
</div>

<div class="container">
  <div class="filterDiv cars">BMW</div>
  <div class="filterDiv colors fruits">Orange</div>
  <div class="filterDiv cars">Volvo</div>
  <div class="filterDiv colors">Red</div>
  <div class="filterDiv cars animals">Mustang</div>
  <div class="filterDiv colors">Blue</div>
  <div class="filterDiv animals">Cat</div>
  <div class="filterDiv animals">Dog</div>
  <div class="filterDiv fruits">Melon</div>
  <div class="filterDiv fruits animals">Kiwi</div>
  <div class="filterDiv fruits">Banana</div>
  <div class="filterDiv fruits">Lemon</div>
  <div class="filterDiv animals">Cow</div>
</div>

使用.toggleClass()，我们可以启用和禁用active 类。这有助于我们找到有源过滤器。然后我们可以使用.each() 来收集每个有源过滤器元素的详细信息。

【讨论】：