文章/答案/技术大牛

发布

社区首页 >问答首页 >过滤HTML内容？

问过滤HTML内容？
EN

Stack Overflow用户

提问于 2020-03-20 08:34:08

回答 1查看 98关注 0票数 3

我目前正在一个网页上工作，我想要对图像进行过滤，根据按钮按下。因此，如果我按下假日，它应该只显示与css类“假日”分配给他们的图像，等等。

我已经尝试过以下两种方法，但没有让它们发挥作用。可能是因为我对javascript缺乏很好的理解而造成的错误。

如何过滤Div元素 by W3Schools
来自堆栈溢出帖子的从下拉菜单中过滤。

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

也在小提琴上

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-20 08:49:58

给你一个解决办法

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。

使用小提琴的解决方案

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60770812

复制

相似问题

问过滤HTML内容？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问过滤HTML内容？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问过滤HTML内容？
EN