javascript - 按条件为 contenteditable div 文本字段中的字母着色

Question

我想为内存游戏创建一个输入字段，其中每个正确的字母(明文)显示为绿色，每个不正确的字母在输入字段中显示为红色。

必须输入的单词以字符串形式提供，因此我可以将输入与解决方案进行比较。

如何根据错误(红色)或正确(绿色)使输入字段中的每个字母具有不同的颜色？

我找到了 this solution对于随机颜色，但我并没有真正转移到我的案例中。

Answer 1

不幸的是，没有简单、优雅的方法来实现您想要的。我所说的优雅是指 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 .