通過條件爲contenteditable div文本字段着色字母

Question

我想爲內存遊戲創建一個輸入字段，其中每個正確的字母（明文）顯示爲綠色，每個不正確的字母在輸入字段中顯示爲紅色。

必須輸入的單詞以字符串形式提供，因此我可以將輸入與解決方案進行比較。

如何根據錯誤（紅色）或右（綠色）使輸入欄中的每個字母變成不同的顏色？

我發現this solution隨機的顏色，但我真的不能轉移到我的情況。

Answer 1

這只是一個決定哪種顏色的物質（紅/綠）的基礎上匹配 - 這裏是從你提到的的jsfiddle代碼的變化：

var correctString = "abcdefg"; // for example, this should come from your code 
$("div").prop("contentEditable", true).blur(function(){ 

    $("#hidden").val($(this).text()); 
    this.innerHTML = ""; 

    var chars = $(this).text().split(""); 
    chars.forEach(function(c,i){ 
    // pick green if characters match, red otherwise 
    // any "extra" characters are automatically red 
    var color = (i < correctString.length && c === correctString.charAt(i))? "#0F0" : "#F00"; 
    $("<span>").text(this).css({ color: color }).appendTo("div"); 
    }); 
}); 

Answer 2

不幸的是，沒有簡單，優雅的方式來實現你想要的。而通過優雅的我的意思是CSS。 （有::first-letter僞元素，但沒有::n-th-letter :(這可能會打開相當多的posibilities）。最好的辦法是用span包裝每個字母，然後根據一定的條件給它們塗上顏色。 。

<span>a</span><span>b</span><span>c</span><span>d</span>

var word = 'abcd'; 
var matches = [0, 1, 1, 0]; 

$(document).ready(function() { 
    for(var i = 0; i <= word.length; i++){ 
    $("span").eq(i).css('color', matches[i] ? 'green':'red'); 
    }; 
}); 

Check it out on jsfiddle