Как запретить выполнение функций на определенном этапе?

Question

[ElRom]

Код:

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

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;
}

var rrr = function() {
	$(this).toggleClass("red");
};
var ggg = function() {
	$(this).toggleClass("green");
};
var yyy = function() {
	$(".green").toggleClass("yellow");
  $("div").off("click mouseenter mouseleave");
};

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

Что нужно получить:
1) необходимо "выбрать" блоки с помощью click (блок становится зелёным), при наведении - красным;
2) при нажатии кнопки "проверка" (выбор сделан) зелёные блоки становятся жёлтыми и функции "rrr" и "ggg" должны быть неактивны;
3) при повторном нажатии кнопки "проверка" функции "rrr" и "ggg" снова активны, можно поменять свой выбор.

Что имеем:
1) работает;
2) работает;
3) функции "rrr" и "ggg" не работают, так как они удалены.

Подскажите, как запретить функции, без удаления или как иным образом решить проблему?

Answer 1

[Сергей Соколов]

Создайте переменную, описывающую состояние. Состояния может быть два: Выбор или Проверка.

В функциях проверяйте, какое нынче состояние.

1. rrr() может работать только в Выборе;
   
2. ggg() – в Выборе;
   
3. yyy() – переключает класс в любом состоянии и меняет состояние.
   

И кнопка переключает состояния. Если сейчас 1, то в 2; а если 2, то в 1.

примерно так

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);

Фиддл

Comments

[ElRom]

Благодарю!

[Сергей Соколов]

ElRom, есть кнопка «Отметить решением» ; )

Answer 2

[Владимир Проскурин]

Сделайте переменную isActive, она будет равная true, если блоки активны. И делайте в событиях проверку

var rrr = function() {
  if(!isActive) return; // Если isActive равна false, дальше не выполняем, функция выключена
  $(this).toggleClass("red");
};

И так для второй функции. Для переключения пишите
isActive = !isActive;
И если переменная была true, она станет false,

Comments

[ElRom]

Благодарю!

[Владимир Проскурин]

ElRom, можно два ответа отмечать решением, если они помогли оба :-)