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

时间:2017-02-08 17:07:02

标签: javascript jquery if-statement keyup

我正在尝试运行一个简单的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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

这样做:

使用keyup()方法

&#13;
&#13;
var i = 0;    
$('#target').hide();
$('#text').keyup(function(event) {
    i++;
    if(i == 5)
    {
        $('#target').show();
    }
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

这看起来像语法错误。大于或等于表示为>=,而不是=>