Question

我想为记忆游戏创建一个输入字段，其中每个正确的字母（以纯文本显示）显示为绿色，并且每个不正确的字母在输入字段内显示为红色。

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

如何根据错误（红色）或右（绿色）使输入字段中的每个字母变成不同的颜色？

我发现this solution是随机颜色的，但我并没有真正转移到我的情况。

Answer 1

不幸的是，没有简单，优雅的方式来实现你想要的。而优雅我的意思是CSS。（有::first-letter伪元素，但没有::n-th-letter :(这可能会打开相当多的可能性。）你最好的选择是用span包裹你的每个字母，然后根据一定的条件给它们涂上颜色。

abcd

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

Answer 2

只需根据匹配决定使用哪种颜色（红色/绿色） - 这里是您所提到的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");
  });
});

按条件着色在contenteditable div textfield中的字母

2 个答案: