JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<div class="qwe">1</div>
<div class="asd">2</div>
<div class="zxc">3</div>
<button>ПРОВЕРКА</button>

CSS

div {
  width: 100px;
  height: 100px;
  background: #000;
  margin: 10px;
  color: #fff;
  text-align: center;
  font-size: 30px;
}
.green {
  background: green;
}
.red {
  background: red;
}
.yellow {
  background: yellow;
}

JavaScript

const STATE_SELECT = 1;
const STATE_CHECK = 2;
var state = STATE_SELECT;

var rrr = function() {
  if(state === STATE_CHECK) return;
  $(this).toggleClass("red");
};
var ggg = function() {
  if(state === STATE_CHECK) return;
  $(this).toggleClass("green");
};
var yyy = function() {
  $(".green").toggleClass("yellow");
  if(state === STATE_CHECK) {
    state = STATE_SELECT;
  } else {
    state = STATE_CHECK;  
  }
};

$("div").hover(rrr);
$("div").click(ggg);
$("button").click(yyy);