값을 비교하고 일치하지 않는 단어에 오류 클래스 추가하기

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'); 
} 

}); 사용자가 입력 한 데이터가 data-for 속성 값과 일치하는지 확인하려면

Answer 1

, 당신은이 작업을 수행 할 수 있습니다

$(".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>