如何过滤多个元素/项目

Question

我正在尝试一次过滤多个项目.例如水果和动物甚至3+.到目前为止,它只能通过一次选择一个项目来实现.我如何选择多个项目？我也尝试了https://wch.io/static/tagsort/demo-stacks/index.html但是它有问题显示文本,但这应该如何,但在javascript？

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(" ");
}

.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;
}

<h2>Filter DIV Elements</h2>

<input type="radio" onclick="filterSelection('all')" name="category" checked> Show all<br>
<input type="radio" onclick="filterSelection('cars')" name="category"> Cars<br>
<input type="radio" onclick="filterSelection('animals')" name="category"> Animals<br>
<input type="radio" onclick="filterSelection('fruits')" name="category"> Fruits<br>
<input type="radio" onclick="filterSelection('colors')" name="category"> Colors<br>

<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>

Answer 1

ID您的输入中缺少该属性。

该属性name对无线电进行分组，并且一次只允许检查一个，但它本身对通过提交或 JavaScript 处理输入没有帮助。

如果它只是关于视觉（没有提交或通过 js 处理），您可以使用 CSS:checked来选择接下来的同级，但它仍然需要一个 id 才能按预期工作。

带有复选框的示例：

#all:checked  ~ .container .filterDiv{
  display: block;
}


.filterDiv, :not(#all):checked ~ .container  .filterDiv{
  float: left;
  background-color: #2196F3;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none;
}

#cars:checked ~ .container .cars,
#animals:checked ~ .container .animals,
#fruits:checked ~ .container .fruits,
#color:checked ~ .container .colors{
  display: block;
}

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

<h2>Filter DIV Elements</h2>

<input type="checkbox"  id="all"  checked> Show all<br>
<input type="checkbox" id="cars"> Cars<br>
<input type="checkbox"  id="animals"> Animals<br>
<input type="checkbox"  id="fruits"  > Fruits<br>
<input type="checkbox" id="color" > Colors<br>

<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>

这是我的旧笔 通过a 中的radio input和s 对画廊进行排序，因此可以在服务器端或通过 javascript 提交和处理选择。labelform您可以从使用表单和无线电的链接代码笔中激发自己的灵感。