Question

我正在使用javascript过滤页面上的一堆div。我正在使用this code进行过滤，并且效果很好。我还在css中使用nth-child创建了一个响应网格，该网格删除了外部边界，从而使外观不太块状。但是，过滤对象时，第n个子对象不会重新计算，因此，除非显示所有div，否则网格中间缺少边框，边缘上没有多余的边框。

是否有人对单击过滤器按钮之一后如何重新应用/重新加载CSS有任何建议？

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Show filtered elements
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];
    }
  }
}

// Hide elements that are not selected
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 control 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";
  });
}

和CSS

.filterDiv {
    border-top: none;
    height:215px;
    border: 1px #ddd solid;

}


.filterDiv:nth-child(4n+0) {
    border-right:none; 
}

.filterDiv:first-child {
    border-left:none; 
}

Answer 1

我已经阅读了您提供的w3schools中的代码。我猜您的问题是:nth-child并没有排除display: none个孩子。

换句话说，在下面的示例中，:nth-child( 2 )是.second。不管它的显示值是什么：

<div class="container">

    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>

</div>

因此，如果您将.first项目设为隐藏，则不会使.second项目成为:first-child；仍然是:nth-child( 2 )。

我希望这可以为您澄清一些事情。

在JavaScript过滤器后重新加载nth-child类

1 个答案: