Как реализовать фильтрацию? Пожалуйста, не на PHP

Question

Как реализовать фильтрацию? Пожалуйста, не на PHP

пон Профи (974), на голосовании 1 год назад

надо сделать фильтры на сайте, чтобы было несколько выборов(как в магазине: бренд, размер, страна), а не только 1 вариант. вот пример кода на 1 выбор

html

 	FILTER BY COLOR
 
  
   
  BLUE 
   
  RED 
   
  GREEN 
   
  RESET 
  
  1
 
  2
 
  3
 
  4
 
  5
 
  6
 
  7
 
  8
 
  9
 
  10
 
  11
 
  12
 
  13
 
  14
 
  15
 
  16

css

 	body{ 
  margin:0; 
  text-align:center; 
  font-family: Verdana; 
  background:#f5f5f5; 
} 
h1 { 
  text-align:center; 
} 
.container { 
  width:90%; 
  margin:0 auto; 
} 
input[type="radio"] { 
    display:none; 
} 
label { 
  width:23%; 
  float:left; 
  text-align:center; 
  background:#ffffff; 
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
  color:#222222; 
  padding:0.5%; 
  margin:0.5%; 
  margin-bottom:30px; 
  cursor:pointer; 
} 
input[type="radio"][id="blue"]:checked + label { 
  background:#6666ff; 
} 
input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green { 
  width:0; 
  height:0; 
  padding:0; 
  margin:0; 
  opacity:0; 
} 
input[type="radio"][id="red"]:checked + label { 
  background:#ff4466; 
} 
input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green { 
  width:0; 
  height:0; 
  padding:0; 
  margin:0; 
  opacity:0; 
} 
input[type="radio"][id="green"]:checked + label { 
  background:#66dd99; 
} 
input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red { 
  width:0; 
  height:0; 
  padding:0; 
  margin:0; 
  opacity:0; 
} 
  
.tile { 
  width:23%; 
  height:100px; 
  float:left; 
  transition:all 1s; 
  margin:0.5%; 
  padding:0.5%; 
} 
.green { 
  background:#66dd99; 
} 
.blue { 
  background:#6666ff; 
} 
.red { 
  background:#ff4466; 
}

Answer 1

Ctrl+C Ctrl+V, как минимум меняешь name везде на другое

Answer 2

Для реализации фильтрации на сайте можно использовать CSS свойство filter

Это свойство позволяет применять визуальные эффекты, такие как размытие или изменение цвета, к элементу. Для создания фильтров на сайте можно использовать различные функции, такие как blur(), grayscale(), saturate() и другие. Для применения нескольких фильтров к элементу их нужно разделять пробелом. Например, можно создать фильтр для изменения цвета элемента на черно-белый с помощью filter: grayscale(100%); и фильтр для размытия элемента с помощью filter: blur(5px);. Для создания фильтров на сайте можно использовать как готовые функции, так и создавать свои собственные с помощью SVG фильтров

Ты не просил переделывать код и я только ответила как реализовать