Блог

Я сравниваю два значения с помощью 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 amp;amp; 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 значению атрибутов, вы можете сделать это:

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