条件付き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はありません:(かなりの可能性があります）。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