过滤元素：根据子类显示父元素

Question

代码：https://www.w3schools.com/code/tryit.asp?filename=FP4G4XPN4ICA

＆＃13;

＆＃13;

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 filterSelection2(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv2");
  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";
  });
}

＆＃13;

.filterDiv {
  float: left;
  text-align: center;
  margin: 2px;
  display: none;
}

.show {
  display: block;
}

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

＆＃13;

<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('colors')"> Colors</button>
  <button class="btn" onclick="filterSelection2('fruits')"> Fruits</button>
</div>

<ul class="container">
  <li class="filterDiv"><div class="filterdiv2 fruits">apple</div></li>
  <li class="filterDiv cars">Volvo</li>
  <li class="filterDiv colors">Red</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

我想要实现的目标： 当按钮＆＃34; Fruits＆＃34;单击，包含子元素的li元素包含类＆＃34; fruits＆＃34;待显示。

我应该在方法filterSelection2（）中更改/重写哪些内容？

Answer 1

您不需要两种不同的filterSelection()方法：

最好以这种方式尝试：

＆＃13;

＆＃13;

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == 'all') {
    for (i = 0; i < x.length; i++) {
      w3AddClass(x[i], "show");
    }
  } else {
    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(" ");
}

＆＃13;

.show {
  display: block !important;
}
li {
  display: none;
}

＆＃13;

<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('colors')"> Colors</button>
  <button class="btn" onclick="filterSelection('fruits')"> Fruits</button>
</div>

<ul class="container">
  <li class="filterDiv fruits">apple</li>
  <li class="filterDiv cars">Volvo</li>
  <li class="filterDiv colors">Red</li>
</ul>

＆＃13;

＆＃13;

＆＃13;