jquery - 为什么这个简单的 jQuery 代码不起作用？

Question

我刚接触 jquery 两天，所以我可能在这里犯了一个简单的错误。基本上我有一个输入字段，当单击它时，它周围会有一个蓝色边框(通过将 css 类添加到 keyup 上的输入字段并且 css 添加边框颜色来实现此目的)。在键盘上还会显示提交按钮。我唯一想要的另一件事是显示剩余的字符数。除了最后一部分之外，其他一切都有效。这是我的全部代码:

<style type="text/css">.onFocus { border:3px solid #BBDAFD; }</style>

<script type="text/javascript">
    $(document).ready(function(){

        $('.submitButton').hide();
        $('.remaining').hide();

        var typed = $('input1').val();

        $('.input1').keyup(function(){
            $('.input1').addClass('onFocus');
            $('.submitButton').show();
            $('.remaining').show().html(150 - typed);
        });

    });
</script>

<form action="submitComment.php" name="" method="post">
    <label>Leave a comment</label>
    <input type="text" class="input1" maxlength="150" />
    <br />
    <span class="remaining"></span>
    <br />
    <input type="button" name="commentSubmit" value="Submit Comment" class="submitButton" />
</form>

不是从应存储在变量“typed”中的输入字段的当前值执行操作 150(这是我想要允许的最大字符限制)，而是 jquery 只是拆分:

NaN

这里的问题/解决方案是什么？

编辑

哦，刚刚注意到这个:

var typed = $('input1').val();

应该是:

var typed = $('.input1').val();

现在 NAN 没有显示，但显示了 150 个。因此该操作仍未执行。

Answer 1

这个:

    var typed = $('input1').val();

    $('.input1').keyup(function(){
        $('.input1').addClass('onFocus');
        $('.submitButton').show();
        $('.remaining').show().html(150 - typed);
    });

需要看起来像这样:

    $('.input1').keyup(function(){
        $(this).addClass('onFocus');
        $('.submitButton').show();
        $('.remaining').show().html(150 - this.value.length);
    });

检查 keyup 处理程序内部的当前值长度非常重要，否则您总是会检查 document.ready< 上的值长度.