Jquery: можно ли оптимизировать скрипт?

237

04 января 2018, 21:58

Есть скрипт, проверяющий, верно ли введено слово в пропуск:

var check = function(input, word) { 
  input.keyup(function(){ 
    if($(this).val() == word) { 
      $(this).css({'color':'green', 'border-bottom-color':'green'}); 
    } 
    else { 
      $(this).css({'color':'black', 'border-bottom-color':'gray'}); 
    } 
  }); 
  input.blur(function(){ 
    if($(this).val() == word) { 
      $(this).css({'color':'green', 'border-bottom-color':'green'}); 
    } 
    else { 
      $(this).css({'color':'red', 'border-bottom-color':'red'}); 
    } 
  }); 
} 
 
 
check($('#am'), 'am'); 
check($('#has'), 'has'); 
check($('#will'), 'will');

input { 
  border: none; 
  border-bottom: 1px solid gray; 
  width: 50px; 
  outline: none; 
  text-align: center; 
}

I <input type="text" id="am" /> a student.<br /> 
She <input type="text" id="has" /> a dog.<br /> 
We <input type="text" id="will" /> come home tomorrow. 
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

По нему имеются два вопроса.

ПЕРВЫЙ: Можно ли как-то объединить keyup и blur? Понятно, что есть конструкция .on('keyup blur', function(){}), но в else там разные цвета.

ВТОРОЙ: На каждую проверку нужно вызывать функцию check со своими аргументами. Сейчас их 3, но будет и 33, и ещё больше. Есть ли какая-то возможность это оптимизировать?

Понятно, что можно создать два массива - с инпутами и со словами - и прогонять вызов функции в цикле, подставляя на каждой итерации соответствующие элементы массивов. Но мне не кажется, что это решение лучше имеющегося. Вдруг есть какой-то совершенно иной вариант?

Answer 1

var check = function(input, word) { 
  input.on('blur keyup', function() { // объединяем ивенты 
    if ($(this).val() != word && event.type == 'blur') { 
      $(this).css({ 
        'color': 'red', 
        'border-bottom-color': 'red' 
      }); 
    }else if($(this).val() != word && event.type == 'keyup') { 
      $(this).css({ 
        'color': 'black', 
        'border-bottom-color': 'black' 
      }); 
    }else { 
      $(this).css({ 
        'color': 'green', 
        'border-bottom-color': 'green' 
      }); 
 
    } 
  }) 
}; 
 
$(".chekable").each(function() { // навешиваем функцию на все инпуты в наборе.  
  check($(this), $(this).data('answer')); 
});

input { 
  border: none; 
  border-bottom: 1px solid gray; 
  width: 50px; 
  outline: none; 
  text-align: center; 
}

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
 
I <input type="text" id="am" class="chekable" data-answer="am" /> a student.<br /> She <input type="text" id="has" class="chekable" data-answer="has" /> a dog.<br /> We <input type="text" id="will" class="chekable" data-answer="will" /> come home tomorrow.

Answer 2

   function check(i) { 
  //проверяем совпадает ли значение с его data-info атрибутом 
 
  i.keyup(function(){ 
       $(this).css(($(this).val() == $(this).attr("data-info")?{'color':'green', 'border-bottom-c olor':'green'}:{'color':'black', 'border-bottom-color':'gray'})); 
  }); 
  i.blur(function(){ 
      $(this).css(($(this).val() == $(this).attr("data-info")?{'color':'green', 'border-bottom- 
      color':'green'}:{'color':'black', 'border-bottom-color':'gray'})); 
  }); 
} 
 
$(".inp").each(function() { //задаем обработчик событий  
check($(this)); 
});

input { 
  border: none; 
  border-bottom: 1px solid gray; 
  width: 50px; 
  outline: none; 
  text-align: center; 
}

I <input type="text" class="inp" data-info="am"/> a student.<br /> 
She <input type="text" class="inp" data-info="has"/> a dog.<br /> 
We <input type="text" class="inp" data-info="will"/> come home tomorrow. 
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>