无法使JS函数正常工作

debugcn 发表于 Dev

antares667367

我有带有自举程序的表格，但是我不知道为什么它不能正常工作，我也不知道为什么。

头>>

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="css/corrections.css" rel="stylesheet" type="text/css"/>
    <script src="js/JQuery-2.1.1-min.js" type="text/javascript"></script>
    <title></title>
</head>
<body>

->代码在这里

</body>

HTML >>

<div class="col-lg-4">
        <form class="form-inline well">
            <div class="form-group">
                <label class="sr-only" for="text">Some label</label>
                <input id="text" type="text" class="form-control" placeholder="Text here">
            </div>
            <button type="submit" class="btn btn-primary pull-right">Ok</button>

            <div class="alert alert-danger" style="display:none">
                <h4>Error</h4>
                Required amount of letters is 4
            </div>

            <div class="success alert-success" style="display:none">
                <h4>Success</h4>
                You have the required amount of letters
            </div>

        </form>
    </div>

JS >>

 <script>
        $(function () {
            $("form").on("submit", function () {
                if ($("input").val().length < 4) {                    
                    $("div.form-group").addClass("has-error");
                    $("div.alert").show("slow").delay(4000).hide("slow");
                    return;    
                } else if ($("input").val().length > 3) {
                    $("div.form-group").addClass("has-success");
                    $("div.success").show("slow").delay(4000).hide("slow");
                    return;   
                }
            });
        });
    </script>

警报类每次都会显示，为什么？

德诺

$("input")这里的使用是不寻常的。该选择器将拉回页面上所有为<input>s的元素，这几乎肯定不是您的意思。（如果input页面上还有其他，您可能会确切地得到您所描述的内容。）使用更精确的选择器，例如$("#text")，并可能使用debug输出的值，val().length以便您知道要评估的内容。