Вот решение на чистом jQuery, которое соответствует вашим требованиям:
```html
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
```
```css
.one, .two, .three {
background-color: grey;
width: 100px;
line-height: 100px;
color: #FFFFFF;
font-size: 26px;
text-align: center;
display: inline-block;
margin: 10px;
}
.one.active, .two.active {
background-color: green;
}
.three.active {
background-color: red;
}
```
```javascript
var clicked = [];
$(".one, .two, .three").click(function() {
var num = parseInt($(this).text());
if (clicked.length < 3) {
clicked.push(num);
}
$(this).addClass("active");
if (clicked.length === 3) {
if (clicked[0] === 1 && clicked[1] === 2 && clicked[2] === 3) {
alert("Правильно");
} else {
alert("Неправильно");
$(".one, .two, .three").removeClass("active");
clicked = [];
}
}
});
```
Объяснение:
1. Мы добавляем CSS-классы `.active` для блоков, чтобы изменить их цвет фона при нажатии.
2. Используем массив `clicked`, чтобы хранить нажатые числа.
3. При нажатии на блок:
- Добавляем число в массив `clicked`, если их меньше 3.
- Добавляем класс `.active` к нажатому блоку.
- Если в массиве 3 числа, проверяем, правильная ли последовательность (1, 2, 3). Если да, выводим "Правильно", если нет, выводим "Неправильно" и сбрасываем выделение блоков.
Таким образом, вы можете нажимать на блоки в любом порядке, но только последовательность 1, 2, 3 будет считаться правильной.