Question

我正在尝试在网站上设置“复活节彩蛋”类型页面，有人可以点击彩色方块来循环显示各种颜色。有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>

编辑：如果颜色组合正确，我认为单击按钮并打印成功响应会更容易，而不是显示按钮。上面的代码反映了我的变化，但我仍然无法让它发挥作用。

如何显示基于div颜色序列jQuery的按钮

0 个答案: