Question

此代码应在输入上触发onKeyUp函数，然后检查字符串的值是否小于3个字符;如果是，那么它会向显示错误消息的div附加一个span。输入超过2个字符后，应删除错误范围。 Curretly它不会删除错误span元素。它也不会在控制台中产生任何错误来调试问题。提前谢谢。

$('#first_name_up').keyup(function(){
    if($('#first_name_up').length < 3){
        $('#first_name_fail').remove();
        $( "<span id='first_name_fail' class='fail'>Enter valid first name</span>" ).appendTo($('#fails'));
    } else {
        $('#fails span').empty();
    }

});

Answer 1

此

$('#first_name_up').length

应该是

$('#first_name_up').val().length

或

$(this).val().length

因为您正在计算输入中的值的长度。

Answer 2

没有控制台错误，因为错误在逻辑中。与@Shaunak_D建议一样，您正在检查返回的元素的长度，而不是输入中字符串的长度。这是我测试的一个例子，如果您不理解之前的答案，这可能对您有用。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8" />
        <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
    </head>
    <body>
        <input type="text" id="first_name_up" name="first_name_up" />
        <div id="fails"></div>
        <script type="text/javascript">
            var $first_name_up = $('#first_name_up'), // Reduces traversing the DOM.
                $fails = $('#fails'), // Reduces traversing the DOM.
                // Makes the code below a bit easier to read.
                failHtml = '<span id="first_name_fail" class="fail">Enter valid first name</span>';

            $first_name_up.keyup(function () {
                if($first_name_up.val().length < 3){
                    $('#first_name_fail').remove();
                    $( failHtml ).appendTo($fails);
                } else {
                    $fails.find('span').empty();
                }
            });
        </script>
    </body>
</html>

删除if语句Jquery中的附加元素

2 个答案: