CSS 또는 JS의 단순 필터

이 글에서 나는 사이트에 간단하고 유연한 필터 해결 방안을 추가하는 방법을 보여 주고 싶다.이곳의 용례는 제 사례 투자조합 프로젝트에 공작물의 집합이 있다는 것입니다. 하지만 여기서 우리는 동물로 간소화할 것입니다. 저는 다음과 같이 할 수 있기를 바랍니다.

단추(또는 div 등)를 눌러 필터링합니다.

코드를 변경하지 않아도 모음에 새 항목을 쉽게 추가할 수 있습니다.

같은 필터를 같은 데이터에 적용하는 두 가지 방법을 연구하겠습니다. 하나는 자바스크립트 기반이고, 다른 하나는 CSS 기반입니다.
필터와 동물 집합을 위한 html부터 시작하겠습니다. 필터를 단추로 표시하고 모든 동물을 위한 div를 만듭니다.

<div class="filters">
  <h3>Filters</h3>
  <button class="filter-option">Walks</button>
  <button class="filter-option">Swims</button>
  <button class="filter-option">Flies</button>
  <button class="filter-option">All</button>
</div>

<div class="list">
  <h3>Animals</h3>
  <div class="dog">Dog</div>
  <div class="eagle">Eagle</div>
  <div class="cow">Cow</div>
  <div class="shark">Shark</div>
  <div class="canary">Canary</div>
  <div class="human">Human</div>
  <div class="salamander">Salamander</div>
</div>

JS 필터 - 더 전통적인 방식

물론 JavaScript를 사용하여 필터링할 수 있는 방법은 많습니다.그러기 위해서, 나는 JS 함수를 편집하러 돌아오고 싶지 않기 때문에, 내가 나중에 추가한 모든 내용을 덮어쓸 수 있는 충분한 유연성을 확보하고 싶다.이를 위해서는 모든 필터가 어떤 동물을 포함/배제해야 하는지 확인하는 방법이 필요하다는 것을 알고 있습니다. 저는 HTML이 대부분의 힘든 작업을 완성할 수 있기를 바랍니다. 그러면 저는 HTML을 추가해서 집합에만 추가할 수 있습니다.

HTML
우선, 나는 모든 동물div에 관련 필터의 이름을 포함하는 종류를 추가할 것이다.이것은 나의 표지부호가 될 것이다.

<div class="list">
  <h3>Animals</h3>
  <div class="dog walks">Dog</div>
  <div class="eagle flies">Eagle</div>
  <div class="cow walks">Cow</div>
  <div class="shark swims">Shark</div>
  <div class="canary flies">Canary</div>
  <div class="human walks">Human</div>
  <div class="salamander swims walks">Salamander</div>
</div>

마지막 종목인 쿠루토는 걷거나 수영할 수 있으니 주의하세요.우리는 필터 함수가 여러 조건에 속하는 항목을 처리할 수 있도록 확보해야 한다.
다음으로, 나는 모든 필터에 이벤트 탐지기를 추가해서 나의 JS 함수를 호출해야 한다는 것을 안다.왠지 모르게 나도 필터 값을 함수에 전달하고 싶다.우리는 유사한 이벤트 탐지기 호출을 작성할 수 있지만, 다른 코드에서 필터의 값을 얻을 수도 있기 때문에, 이 값을 HTML onclick="filterAnimals('walks')" 속성으로 하고 함수에서 사용할 수 있습니다.코드가 더 읽을 수 있어도 부작용이 하나 더 있다.

<div class="filters">
  <h3>Filters</h3>
  <button class="filter-option" data-filter="walks" onclick=filterAnimals(event)>Walks</button>
  <button class="filter-option" data-filter="swims" onclick=filterAnimals(event)>Swims</button>
  <button class="filter-option" data-filter="flies" onclick=filterAnimals(event)>Flies</button>
  <button class="filter-option" data-filter="*" onclick=filterAnimals(event)>All</button>
</div>

CSS
필터링할 항목을 실제로 가져오는 방법을 결정할 때가 되었다.CSS에서는 요소를 data- 로 설정하여 페이지에서 요소를 제거할 수 있습니다.이 설정을 가진 클래스를 만듭니다. 그러면 JS 코드가 필요에 따라 간단하게 클래스를 추가/삭제할 수 있습니다...이것은 매우 쉽다.

.hidden {
  display: none;
}

JavaScript
또 뭐 할 거 있어요?필터를 선택할 때, 우리의 JavaScript는 동물을 두루 돌아다니며 필터를 하나의 종류로 포함하는지 확인하기만 하면 된다.만약 그들이 이렇게 한다면, 그들은 display: none류를 얻지 말아야 한다. 만약 그들이 없다면, 그들은 확실히 추가된 종류를 얻게 될 것이다.

function filterAnimals(e) {
  const animals = document.querySelectorAll(".list div"); // select all animal divs
  let filter = e.target.dataset.filter; // grab the value in the event target's data-filter attribute
  animals.forEach(animal => {
    animal.classList.contains(filter) // does the animal have the filter in its class list?
    ? animal.classList.remove('hidden') // if yes, make sure .hidden is not applied
    : animal.classList.add('hidden'); // if no, apply .hidden
  });
};

너무 좋아요.이제 우리의 필터가 작동할 수 있을 거야, 어디 보자.




주의, 우리의 골칫거리 제조자인 쿠루토가 확실히 산책과 수영 필터에 나타났다는 것은 좋은 소식입니다!하지만 모든 필터를 봐...그다지 좋지 않다.우리는 데이터가 있다는 것을 알고 있기 때문에 틀림없이 무언가가 있을 것이다. 그렇지?불행하게도, 우리의 모든 공작물에는 .hidden 종류가 없기 때문에, 필터는 어떤 내용도 일치하지 않을 것이다.우리는 .all 을 모든 동물에 추가할 수 있지만, 우리의 JavaScript 처리는 더욱 깨끗하고 쉽다.필터가 "all"인지 아니면 더 구체적인 것인지 확인하려면 if/else 문장 하나만 필요합니다.

// code to add:
if (filter === '*') {
  animals.forEach(animal => animal.classList.remove('hidden'));
}

// full JS code:
function filterAnimals(e) {
  const animals = document.querySelectorAll(".list div");
  let filter = e.target.dataset.filter;
  if (filter === '*') {
    animals.forEach(animal => animal.classList.remove('hidden'));
  }  else {
    animals.forEach(animal => {
      animal.classList.contains(filter) ? 
      animal.classList.remove('hidden') : 
      animal.classList.add('hidden');
    });
  };
};

자, 이제 우리는 모두 준비가 다 되었다.만약 우리가 나중에 타조와 같은 것을 추가하고 싶다면, 우리는 HTML을 한 줄만 입력해야 한다..all다른 모든 것은 마술처럼 우리를 보살펴 준다.

CSS 필터

JavaScript를 사용하지 않고 같은 작업을 수행하는 방법을 살펴보겠습니다.그것은 깔끔한 CSS 기교를 포함한다!

HTML
우선, 우리는 더 이상 어떤 사건 탐지기를 필요로 하지 않습니다. 호출할 수 있는 JS 함수가 없기 때문에 그것들을 없애겠습니다.그렇지 않으면 모든 것이 같다.

<div class="filters">
  <h3>Filters</h3>
  <button class="filter-option" data-filter="walks">Walks</button> 
  <button class="filter-option" data-filter="swims">Swims</button> 
  <button class="filter-option" data-filter="flies">Flies</button> 
  <button class="filter-option" data-filter="*">All</button>
</div>

<div class="list">
  <h3>Animals</h3>
  <div class="dog walks">Dog</div>
  <div class="eagle flies">Eagle</div>
  <div class="cow walks">Cow</div>
  <div class="shark swims">Shark</div>
  <div class="canary flies">Canary</div>
  <div class="human walks">Human</div>
  <div class="salamander swims walks">Salamander</div>
</div>

CSS
그런데 CSS는 어떻게 우리를 위해 주동적으로 필터를 합니까?이 문제의 관건은'적극적'부분이다.사용자가 단추를 눌렀을 때, 다른 위치를 눌렀을 때까지 초점 상태에 있습니다.따라서 우리는 단추마다 <div class="ostrich walks">Ostrich</div> 선택기를 추가하여 이 점을 이용할 수 있다.또한 CSS 액세스:focus 속성을 사용하여 지정된 버튼에 초점을 맞출 때 어떤 필터를 적용할지 결정할 수 있습니다.data-우리는 또한 우리가 여과해야 할 동물이 button[data-filter="walks"]:focus 속성을 수신해야 한다는 것을 안다.

button[data-filter="walks"]:focus {
  display:none;
}

그러나 도전은 우리가 단추를 초점에 놓을 때 어떻게 진정으로 동물을 선택하는가에 있다. 단추가 아니라?우리는 display: none 를 사용하여 "동일한 등급의 원소 뒤에 있는 원소"를 선택할 수 있다이것은 정식으로'일반 형제 그룹'More Info Here 이라고 불린다.
유일한 문제는 동물과 필터가 부모 요소를 공유해야 하기 때문에 현재 존재하지 않기 때문에 HTML에 대해 작은 업데이트를 해야 한다. 모든 내용을 하나의div에 통합함으로써 이를 실현하고 ~ 클래스를 주어야 한다.
변경된 후, 우리는 현재 .filteredList 을 사용하여 "선택한 단추와 같은 부모 등급의div를 공유할 수 있습니다. 그 종류는 단추의 데이터 필터 속성 값을 포함합니다."를 선택할 수 있습니다.다음은 모양 ~ 입니다. 모양 *= 은 포함 을 나타냅니다. 여기서 = 은 정확하게 일치해야 합니다.

button[data-filter="walks"]:focus ~ div:not([class*="walks"]) {
  display:none;
}

button[data-filter="swims"]:focus ~ div:not([class*="swims"]) {
  display:none;
}

button[data-filter="flies"]:focus ~ div:not([class*="flies"]) {
  display:none;
}

JavaScript
자바스크립트가 없어요. - 우우!

전체 코드

// HTML
  <div class="filteredList">
    <h3>Filters</h3>
    <button class="filter-option" data-filter="walks" tabindex="-1">Walks</button> 
    <button class="filter-option" data-filter="swims" tabindex="-1">Swims</button> 
    <button class="filter-option" data-filter="flies" tabindex="-1">Flies</button> 
    <button class="filter-option" data-filter="*" tabindex="-1">All</button>

    <h3>Animals</h3>
    <div class="dog walks">Dog</div>
    <div class="eagle flies">Eagle</div>
    <div class="cow walks">Cow</div>
    <div class="shark swims">Shark</div>
    <div class="canary flies">Canary</div>
    <div class="human walks">Human</div>
    <div class="salamander swims walks">Salamander</div>
  </div>

//CSS
button[data-filter="walks"]:focus ~ div:not([class*="walks"]) {
  display:none;
}

button[data-filter="swims"]:focus ~ div:not([class*="swims"]) {
  display:none;
}

button[data-filter="flies"]:focus ~ div:not([class*="flies"]) {
  display:none;
}

지금이 중요한 때인데, 그것이 효과가 있습니까?




효과가 있다!!페이지의 다른 위치를 누르면 단추에 초점이 없기 때문에 필터가 삭제된다는 것을 기억하십시오.마지막으로 우리는 어떻게 새로운 타조 동물을 추가할 것인가?완전히 같은 방식:<div class="ostrich walks">Ostrich</div>전반적으로 말하자면, 자바스크립트 함수는 거의 모든 상황에서 더 좋은 방법일 수 있지만, 나는 이것이 매우 멋진 CSS 기교라고 생각한다. 만약 당신이 경량급의 빠른 필터 기능을 원한다면, 그것은 매우 유용할 것이다.
네가 평론 중인 생각을 나에게 알려줘.