问如何使用HTML和JS过滤和更改样式？
EN

Stack Overflow用户

提问于 2019-10-04 09:20:08

回答 3查看 216关注 0票数 0

我正在做一个项目，在这个项目中我必须过滤页面中的一些元素。我可以设法做到这一点，但我还必须更改元素的宽度，无论它们是否经过过滤。例如，每个元素的宽度为100px，但我希望每三个元素的宽度为300px。

每个显示元素都有一个名为show的类。我所做的就是在.show上添加了300px的样式。但是当我过滤它时，宽度停留在相同的元素上，而不是在第三个.show上。

这是我目前的代码：

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;
    }
    
    .show:nth-child(3n + 0) {
      width: 300px;
    }

<body>
  <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('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 colors">Blue</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>

</body>

有没有人能解决这个问题？

谢谢!

javascript

html

css

回答 3

Stack Overflow用户

发布于 2019-10-04 09:30:01

我认为这些项不能像您所希望的那样显示的原因是，您没有从DOM中删除这些项，而是使用css隐藏它们。这不会影响.show:nth-child(3n + 0)选择器。

我要做的是具体地告诉CSS“容器”中的项应该是什么样子的。例如，可以使用网格来完成此操作。

如果不想使用网格，也可以使用javascript从DOM中删除不应该显示的元素。但在我看来，这并不是最好的解决方案。

票数 0

Stack Overflow用户

发布于 2019-10-04 09:34:45

我所理解的是，你希望过滤后的每个元素都有300px的宽度，一个解决方案可能是:写一个样式：

.filtered {
width:300px;
}

然后使用

$("[your-object]").toggleClass("filtered");

要应用效果，请执行以下操作。

票数 0

Stack Overflow用户

发布于 2019-10-04 13:36:33

我的一个朋友帮我找到了一个解决方案，它是有效的，所以我只是把它发布给正在寻找解决方案的人：

CSS：

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

.show {
    display: block;
}

.item1 {
    width: 300px;
}

.item2 {
    width: 150px;
}

JS：

filterSelection("all");
var count = 0;
function filterSelection(c) {
    clean();
    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 clean() {
    count = 0;
    document.querySelectorAll(".filterDiv").forEach(it => {
        it.classList.forEach(className => {
            className.startsWith("item") && it.classList.remove(className);
        });
    });
}
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];
            element.classList.add(getNext());
        }
    }
}

function getNext() {
    if (!count) {
        count = 0;
    }

    if (count >= 6) {
        count = 1;
    } else {
        count += 1;
    }

    return "item" + count;
}

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