Question

它应该比较文本并更新它。我每次更新文本时都会使用onkeyup。

$(document).ready(function() {
  $("#color").keyup(validate);
});


function validate() {
  var password1 = $("#color").val();
  var pass = $('#coltext').text();
  var length = $("#color").val().length;

  for (int i = 0; i < length; i++) {
    if (pass[i] == password1[i]) {
      $("#coltext").css("color", "green"); //make only correct character green
    } else {
      $("#coltext").css("color", "red");
    }
  }
}

<input id="color" type="text" />
<p id="coltext">This</p>

所以我想要做的就是每当我输入“This”时，应该按字符更新字符，绿色表示正确，红色表示错误。你可以说打字导师做什么。

Answer 1

您必须将密码分解为跨度以便单独设置样式，然后进行比较，然后使用$("#coltext span").eq(i).text()代替pass[i];

$(document).ready(function() {
  $("#color").keyup(validate);
});


function validate() {
  var password1 = $("#color").val();
  
  // put each of your password chars in a span
  var pass = "<span>"+$('#coltext').text().split("").join("</span><span>")+"</span>";
  $('#coltext').html(pass);
  
  var length = $("#color").val().length;

  for (var i = 0; i < length; i++) {
    if ($("#coltext span").eq(i).text() == password1[i]) {
      $("#coltext span").eq(i).css("color", "green"); //make only correct character green
    } else {
      $("#coltext span").eq(i).css("color", "red");
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="color" type="text" />
<p id="coltext">This</p>

Answer 2

<!DOCTYPE html>
<html>
<body>
<script>
var x = "Cancelled";
var y = "Cancelled";
if(x==y)
{
    alert("equal");
}
else
{
    alert("not equal");
}
</script>

</body>
</html>

JS或jQuery逐字符地比较两个文本

2 个答案: