JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="filter">
  Фильтр
  <table border="1">
    <tr>
      <td>Выпуски</td>
      <td class="filter_item_0">
      <input type="image" title="Частая "src="http://berserk.ru/image/cache/berserk/berserk-filters/87801_cardrarities-30x30.png"/>
      </td>
    </tr>
  </table>
</div>

CSS

.filter_item_0 {
  width: 30px;
  height: 30px;
  background: #0000;
}
.filter_item_1 {
  width: 30px;
  height: 30px;
  background: #0f0;
}
.filter_item_2 {
  width: 30px;
  height: 30px;
  background: #f00;
}

JavaScript

function filter(el) {
  /*
  if(el.class == "filter_item_0")
    el.class = "filter_item_1";
  else if(el.class == "filter_item_1")
    el.class = "filter_item_2";
  else  el.class = "filter_item_0";
  */
  console.log(el);
}
document.querySelector('input[type="image"]').addEventListener("click", filter(this.parentElement));