JSFiddle - React, Tailwind, and code Playground

by kirrrusha

HTML

<div class="fd">
  <div class="wrapper" id="slider">
    <div class="tabs">
      <ul>
        <li data-filter="*">All</li>
        <li data-filter="graphics">graphics</li>
        <li data-filter="love">Filter2</li>
        <li data-filter="coffee">Filter3</li>
      </ul>
    </div>
    <div class="entities">
      <ul>
        <li class="love">Love1</li>
        <li class="graphics">Graphics1</li>
        <li class="coffee">Coffee1</li>
        <li class="love">Love2</li>
        <li class="graphics">Graphics1</li>
        <li class="coffee">Coffee2</li>
      </ul>
    </div>
  </div>
  <div class="wrapper" id="conform">
    <div class="tabs">
      <ul>
        <li data-filter="*">All</li>
        <li data-filter="graphics">graphics</li>
        <li data-filter="love">Filter2</li>
        <li data-filter="coffee">Filter3</li>
      </ul>
    </div>
    <div class="entities">
      <ul>
        <li class="love">Love1</li>
        <li class="graphics">Graphics1</li>
        <li class="coffee">Coffee1</li>
        <li class="love">Love2</li>
        <li class="graphics">Graphics1</li>
        <li class="coffee">Coffee2</li>
      </ul>
    </div>
  </div>
</div>

CSS

.hidden {
  display: none;
}

JavaScript

(function() {
  window.selectPlugin = selectPlugin;

  function selectPlugin() {
    
  }
  selectPlugin.prototype.setSelectors = function(cssFiltersClass, cssEntitiesClass) {
    this.filters = document.querySelectorAll(cssFiltersClass);
    this.entities = document.querySelectorAll(cssEntitiesClass);
  }
  selectPlugin.prototype.clickEventListener = function(event) {
    var filterName = event.target.getAttribute("data-filter"); // присваивает в переменную атрибут data-filter

    this.entities.forEach(function(entity) { // сама логика работы обработчика
      if (filterName == '*' || entity.classList.contains(filterName)) {
        entity.classList.remove('hidden');
      } else {
        entity.classList.add('hidden');
      }
    })
  }
  selectPlugin.prototype.run = function() {
  	var _this = this;
    var filterForEach = function(item) {
      item.addEventListener('click', _this.clickEventListener.bind(_this)); //функция для работы с объектом обработчик событий по click
    }
    this.filters.forEach(filterForEach); // фильтр обработки событий по клику на .tabs
  };
}())


var selector1 = new window.selectPlugin();
selector1.setSelectors("#slider .tabs", "#slider .entities ul li");
selector1.run();
var selector2 = new window.selectPlugin();
selector2.setSelectors("#conform .tabs", "#conform .entities ul li");
selector2.run();