Question

我遇到错误

Uncaught TypeError: "#category-name".val is not a function
at HTMLButtonElement.<anonymous> (<anonymous>:28:42)
at HTMLButtonElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLButtonElement.y.handle (jquery-3.3.1.min.js:2)

在控制台中显示的jquery脚本中。这是我的category.html代码。

<h2>Categories</h2>

<hr />

<div class="row">

    <div class="col-lg-5">
        <h4>Add new</h4>
            <form>
                <div class="form-group">
                    <label for="category-name">Enter name</label>
                    <input type="text" class="form-control" id="category-name" />
                    <div class="invalid-feedback">
                        Please enter the category name
                    </div>
                </div>

                <div class="form-group">
                    <label for="category-desc">Description</label>
                    <input type="text" class="form-control" id="category-desc" />
                    <div class="invalid-feedback">
                        Please enter some short description for the category
                    </div>
                </div>

                <div class="form-group">
                    <label for="category-thumbnail">Thumbnail</label>
                    <input type="file" class="form-control" id="category-thumbnail" />
                    <div class="invalid-feedback">
                        Please choose a valid image thumbnail
                    </div>
                </div>

                <div class="form-group">
                        <Img id="selected-thumbnail" width="250" height="150" src="#">
                </div>

                <div class="form-group">
                    <div class="progress">
                        <div class="progress-bar" id="upload-progress" style="width:0%">0%</div>
                    </div>
                </div>

                <div class="form-group">
                    <button id="save-category" type="button" class="btn btn-primary">Save</button>
                </div>
            </form>

            <div id="result">
            </div>
    </div>

    <div class="col-lg-7">
        <h4>Saved Categories</h4>

    </div>
</div>

<script>
    var  validImageTypes = ["image/gif", "image/jpeg", "image/png",];

    $("#selected-thumbnail").hide();

    function previewThumbnail(thumbnail){
        if(thumbnail.files && thumbnail.files[0]){
            var reader = new FileReader();

            reader.onload = function(e){
                $("#selected-thumbnail").attr('src', e.target.result);
                $("#selected-thumbnail").fadeIn();
            }

            reader.readAsDataURL(thumbnail.files[0]);
        }
    }

    $("#category-thumbnail").change(function(){
        previewThumbnail(this);
    });

    $("#save-category").click(function(){
        $("#category-name").removeClass("is-invalid");
        $("#category-desc").removeClass("is-invalid");
        $("#category-thumbnail").removeClass("is-invalid");

        var catname = ("#category-name").val();
        var desc = ("#category-description").val();
        var thumbnail = ("#category-thumbnail").prop("files")[0];

        if(!catname){
            $("#category-name").addClass("is-invalid");
            return;
        }

        if(!desc){
            $("#category-desc").addClass("is-invalid");
            return;
        }

        if(thumbnail == null){
            $("#category-thumbnail").addClass("is-invalid");
            return;
        }

        if($.ifArray(thumbnail["type"], validImageTypes)<0){
            $("#category-thumbnail").addClass("is-invalid");
            return;
        }

        //upload the image and save category

    });
</script>

但是，如果我写("#category-name").val代替("#category-name").val()，错误就会消失。它也与("#category-desc").val()和("#category-thumbnail").prop(files)[0]保持一致，我真的无法理解为什么会这样吗？看来编码或jquery脚本没有任何作用，或者ifArray可能出了点问题而无法弄清。

Answer 1

替换您的代码中缺少的$。：）

$("#save-category").click(function(){
        $("#category-name").removeClass("is-invalid");
        $("#category-desc").removeClass("is-invalid");
        $("#category-thumbnail").removeClass("is-invalid");

        var catname = $("#category-name").val();
        var desc = $("#category-description").val();
        var thumbnail = $("#category-thumbnail").prop("files")[0];

        if(!catname){
            $("#category-name").addClass("is-invalid");
            return;
        }

        if(!desc){
            $("#category-desc").addClass("is-invalid");
            return;
        }

        if(thumbnail == null){
            $("#category-thumbnail").addClass("is-invalid");
            return;
        }

        if($.ifArray(thumbnail["type"], validImageTypes)<0){
            $("#category-thumbnail").addClass("is-invalid");
            return;
        }

        //upload the image and save category

    });

未捕获的TypeError：“＃category-name” .val不是函数

1 个答案: