2017-02-08 10 views
0

Я пытаюсь запустить простой if-statement, который проверяет, имеет ли значение ввода (то, что набирается) не менее 5, а затем для отображения кнопки отправки. Я попытался использовать функцию keyup для определения значения при вводе.Получение div, чтобы показать, соответствует ли длина входного значения

Кто-нибудь видит, что я делаю неправильно?

jQuery.fn.fadeBoolToggle = function(bool) { 
 
    return bool ? this.fadeIn(400) : this.fadeOut(400); 
 
} 
 
$('#submit-package').hide(); 
 
$('#package-name-input').on('keyup', function() { 
 
    var nameInput = $(this).val().length; 
 
    if (nameInput => 5) { 
 
    $('#submit-package').fadeBoolToggle(); 
 
    } 
 
    //$('#package-name-input').val().fadeBoolToggle(length > 5); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" class="gen-input" id="package-name-input"> 
 
<div class="proceed-btn sans-pro" id="submit-package"> 
 
    <span class="proceed-btn-text">SUBMIT</span> 
 
</div>

+1

'fadeBoolToggle' ждет аргумента, который вы никогда не проходите. – Teemu

ответ

4

Вы можете передать состояние в качестве параметра функции, и вы должны изменить => к >=

jQuery.fn.fadeBoolToggle = function(bool) { 
 
    return bool ? this.fadeIn(400) : this.fadeOut(400); 
 
} 
 
$('#submit-package').hide(); 
 
$('#package-name-input').on('keyup', function() { 
 
    var nameInput = $(this).val().length; 
 
    $('#submit-package').fadeBoolToggle(nameInput >= 5); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="gen-input" id="package-name-input"> 
 
<div class="proceed-btn sans-pro" id="submit-package"> 
 
    <span class="proceed-btn-text">SUBMIT</span> 
 
</div>

+0

Это прекрасно, спасибо! Я предполагаю, что мой прокомментированный код, который я пробовал первым, был ближе, чем оператор if. – Paul

0

ли это нравится:

использование keyup() метод

var i = 0;  
 
$('#target').hide(); 
 
$('#text').keyup(function(event) { 
 
    i++; 
 
    if(i == 5) 
 
    { 
 
     $('#target').show(); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
    <input type="text" id="text"> 
 
<div id="target"> 
 
<input type="button" value="submit"> 
 
</div>

0

Это выглядит как ошибка синтаксиса. Больше или равно выражается как >=, а не =>.