时间戳

首页 > 解决方案 > 过滤 HTML 内容？

javascript - 过滤 HTML 内容？

问题描述

我目前正在处理一个网页，我希望根据按钮按下来过滤图像。因此，如果我按假期，它应该只显示分配给它们的 css 类“假期”的图像，等等。

我已经尝试了以下两种方法，但没有让它们起作用。由于对javascript缺乏很好的理解，这可能是我的错误。

* {
    box-sizing: border-box;
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red; /* Just for Display purposes */
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

.button-container {
  text-align: center;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.flex-content {
    width: 20%;
    padding: 5px;
}
<body>
  <div class="row">
    <div class="col-12">
      <h1 style="text-align: center;">Image List</h1>
      <div class="button-container">
        <button class="button" >All</button>
        <button class="button" >Holidays</button>
        <button class="button" >Work</button>
      </div>
    </div>
    </div>
      <div class="row">
        <div class="col-2"></div>
        <div class="col-8">
          <div class="flex-container">
            <div class="flex-content">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content holiday">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content work">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
          </div>
        </div>
      <div class="col-2"> 
    </div>
  </div>
</body>

同样在jsfiddle

标签： javascripthtmlcss

解决方案

给你一个解决方案

filterSelection("all")
function filterSelection(c) {
	var eles = document.getElementsByClassName("flex-content");
  
  for(var i=0; i < eles.length; i++) {
  	if (c === "all" || eles[i].classList.contains(c)) {
    	eles[i].classList.remove("displayNone");
    } else {
    	eles[i].classList.add("displayNone");
    }
  }
}
* {
    box-sizing: border-box;
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red; /* Just for Display purposes */
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

.button-container {
  text-align: center;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.flex-content {
    width: 20%;
    padding: 5px;
}

.displayNone {
  display: none;
}
<body>
  <div class="row">
    <div class="col-12">
      <h1 style="text-align: center;">Image List</h1>
      <div class="button-container">
        <button class="btn" onclick="filterSelection('all')" >All</button>
        <button class="btn" onclick="filterSelection('holiday')" >Holidays</button>
        <button class="btn" onclick="filterSelection('work')" >Work</button>
      </div>
    </div>
    </div>
      <div class="row">
        <div class="col-2"></div>
        <div class="col-8">
          <div class="flex-container">
            <div class="flex-content">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content holiday">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content work">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
          </div>
        </div>
      <div class="col-2"> 
    </div>
  </div>
</body>

将 onClick 方法添加filterSelection到按钮并将值作为参数传递。

创建了一个displayNone隐藏元素的类。

使用 jsfiddle 的解决方案

推荐阅读