比较值并将错误类添加到不匹配的单词

Question

我正在用 javascript/jQuery 比较两个值。一个值是数据属性，另一个是用户正在键入的值。我希望脚本在用户值中找到与数据属性中的单词不匹配的单词。我可以将类添加到整个 .text 元素，但我不知道如何将类添加到单词...我应该拆分这些值吗？

这是我的 HTML 代码

<div id="compare-text">
  <div class="row"><span>1.</span><p class="text" data-for="Some sample text" spellcheck="false" contenteditable="true"></p></div>
  <div class="row"><span>2.</span><p class="text" data-for="Some sample text" spellcheck="false" contenteditable="true"></p></div>
  <div class="row"><span>3.</span><p class="text" data-for="Some sample text" spellcheck="false" contenteditable="true"></p></div>
</div>

这是我的脚本

$('#check').click(function () {
var controlNumber = 1;
$('.text').each(function () {
  var value = $(this).attr('data-for'),
    userValue = $(this).text();
  value = value.toLowerCase();
  userValue = userValue.toLowerCase();
  if (userValue === '') {
    $(this).addClass('error');
    $(this).removeClass('success');
    controlNumber = 0;
  } else if (value !== userValue && userValue !== '') {
    $(this).addClass('error');
    $(this).removeClass('success');
    controlNumber = 0;
  } else if (value === userValue) {
    $(this).addClass('success');
    $(this).removeClass('error');
  } else {
    controlNumber = 1;
  }
});
if (controlNumber === 1) {
  $('#success-message').addClass('visible');
}

});

Answer 1

如果要检查键入的数据是否与data-for 属性值匹配，可以这样做：

$(".test").keydown(function(){
    var data = $(this).attr('data-for').split(" "),
        text = this.value.split(0);
    $(this).addClass("success");
    $(this).removeClass("error");
    for (var i = text.length; i--;) for (var j = data.length; j--;) {
        if (data[j] === text[i])  {
            $(this).addClass("error");
            $(this).removeClass("success");
    }
}) 

将test 元素更改为输入，例如：

<input/> 或 <textarea></textarea>