使用包含css的jQuery函數

我對編碼超級新手，我試圖用jQuery製作一個簡單的顏色遊戲。簡而言之，有4個選項，點擊右邊的一個，彈出一個警報。我隨機將答案放在一個數組（顏色[]）以及其他假人中，然後使用該數組放入css中。使用包含css的jQuery函數

var dummy = '#aaa'; 
    var answer = '#ee00aa'; 

    var colors = [dummy,answer,dummy,dummy]; 

    for (var i = 1; i <= 4; i++) { 
    $('#colorBox'+i).css('background', ''+colors[i-1]+''); 
    } 

    $('#colorBox'+i).click(function() { 
    if ($(this).css('background', ''+colors[answer]+'') == true) { 
     alert("Gratz!"); 
    }

問題是，我無法找到一種方法來定義這個點擊函數的工作的答案。謝謝。

來源

2016-10-19 Salam.MSaif

'$（本）的.css（ '背景'， '' +顏色[答案] + ''）''你已經設置背景顏色，沒有得到其值。 –

你知道任何方式來獲得它的價值@IvankaTodorova？或者，也許我可以閱讀關於這個部分的地方的鏈接？ –

只是不通過第二個參數''.css（'background'）' –

上面的代碼有幾個問題。

使用的css()吸氣的狀態，並直接進行比較的answer字符串，如colors[answer]是無效的。
您不需要重複追加空字符串。
你應該把click處理程序代碼內循環，因爲它依賴於i變量

還有最後一個，要大得多，這種邏輯雖然問題。那就是當從CSS屬性中檢索顏色時，一些瀏覽器會返回十六進制值和其他RGB值。因此，與十六進制值的比較很容易被破壞。

更好的解決方案是將類應用於元素，以便更容易確定哪個是正確的答案。您還可以使用類將常見元素與單個元素（而不是增量id屬性）進行分組。您也可以使用初始循環來構建HTML。事情是這樣的：

var classes = ['d', 'a', 'd', 'd']; 
 
var $container = $('.container'); 
 

 
var html = ''; 
 
for (var i = 0; i < classes.length; i++) { 
 
\t html += '<div class="colorbox ' + classes[i] + '"></div>'; 
 
} 
 
$container.append(html).on('click', '.colorbox', function() { 
 
    if ($(this).hasClass('a')) { 
 
     alert("Gratz!"); 
 
    } 
 
});

.colorbox { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid #000; 
 
} 
 
.colorbox.a { 
 
    background-color: #ee00aa; 
 
} 
 
.colorbox.d { 
 
    background-color: #aaa; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"></div>

來源

2016-10-19 10:33:22

好吧，現在我明白你的意思了。如果我想按照您的建議不使用類來編寫此代碼，該怎麼辦？使用類是解決它的一個很好的方法，但是我不想因爲我想讓RGB變成一個變量，所以每次點擊正確的答案時它都會改變。 –

var color = $（this）.css（'background'）; if（color == ans） –

使用包含css的jQuery函數

回答

相關問題