Фильтрация HTML контента? - PullRequest
Новая
       0

Фильтрация HTML контента?

3 голосов
/ 20 марта 2020

В настоящее время я работаю над веб-страницей и хочу, чтобы изображения были отфильтрованы по нажатию кнопок. Поэтому, если я нажимаю «Праздники», на нем должны отображаться только изображения с назначенным им «праздником» класса css и т. Д. c.

. Я уже попробовал следующие 2 подхода, но не получил их на работу. Вероятно, ошибка с моей стороны из-за отсутствия хорошего понимания 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

1 Ответ

1 голос
/ 20 марта 2020

Вот вам go с решением 

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...