Я пытаюсь настроить страницу типа «пасхальное яйцо» на веб-сайте, где кто-то может нажимать на цветные квадраты, чтобы переключаться между различными цветами.Есть 8 квадратов, и я хочу, чтобы кнопка отображалась в правильной цветовой последовательности, используя jQuery.У меня есть следующая настройка, которая работает для цветового цикла, но я новичок в jQuery и не знаю, как проверить правильность цветовой последовательности.Я работаю в Rails 5.
var backgrounds = ["red", "green", "yellow", "orange", "purple", "violet",
"pink", "steelblue", "blue"];
function setColor(el) {
el.colorIdx = el.colorIdx || 0;
el.style.backgroundColor = backgrounds[el.colorIdx++ % backgrounds.length];
}
var buttonMessage = "Success";
function buttonCheck() {
if ($('#div1').css('background-color')=='rgb(255, 255, 255') {
buttonMessage;
} else {
buttonMessage = "Failure";
}
document.getElementById("test").innerHTML = buttonMessage;
}
div .colored {
background: blue;
height: 100px;
width: 100px;
margin: 10px;
float: center;
}
<div class="row">
<div class="colored" id="div1" onclick="setColor(this)"></div>
<div class="colored" id="div2" onclick="setColor(this)"></div>
<div class="colored" id="div3" onclick="setColor(this)"></div>
<div class="colored" id="div4" onclick="setColor(this)"></div>
</div>
<div clas="row">
<div class="colored" id="div5" onclick="setColor(this)"></div>
<div class="colored" id="div6" onclick="setColor(this)"></div>
<div class="colored" id="div7" onclick="setColor(this)"></div>
<div class="colored" id="div8" onclick="setColor(this)"></div>
</div>
<button onclick="buttonCheck()">Click here</button>
<h1 id="test"></h1>
Редактировать: вместо появления кнопки я подумал, что будет проще нажать кнопку и напечатать ответ об успехе, если комбинация цветов верна,Приведенный выше код отражает мои изменения, но я все еще не могу заставить его работать.