获取 div 以显示是否满足输入值的长度

Question

我正在尝试运行一个简单的 if-statement 检查输入值（输入的内容）是否至少为 5，然后显示提交按钮。我尝试使用 keyup 函数来检测输入的值。

有没有人看出我做错了什么？

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>

Answer 1

您可以将条件作为您的函数参数传递，您也应该将 => 更改为 >=

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>

Answer 2

这样做：

使用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>

Answer 3

这看起来像是一个语法错误。大于等于表示为>=，而不是=>.

获取 div 以显示是否满足输入值的长度

Getting a div to show if an input value's length is met

javascript

jquery

if-statement

keyup