Jquery 未捕获的TypeError:“#类别名称；。val不是一个函数

我犯了个错误

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)

uncaughttypeerror:#category name.val不是函数
在HTMLButtoneElement。(:28:42)
在HTMLButtonElement.dispatch（jquery-3.3.1.min.js:2）
位于HTMLButtonElement.y.handle（jquery-3.3.1.min.js:2）

在控制台中显示的jquery脚本中。这是我的categories.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>

类别

新增
输入名称
请输入类别名称
描述
请为类别输入一些简短描述
缩略图
请选择有效的图像缩略图
0%
拯救
保存的类别
var validImageTypes=[“图像/gif”、“图像/jpeg”、“图像/png”，]；
$（“#选定缩略图”）.hide（）；
函数预览缩略图（缩略图）{
if（thumbnail.files&&thumbnail.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（“#选定缩略图”）.attr（'src'，e.target.result）；
$（“#选定缩略图”）.fadeIn（）；
}
reader.readAsDataURL（缩略图.files[0]）；
}
}
$（“#类别缩略图”）.change（函数（）{
预览缩略图（本）；
});
$（“#保存类别”）。单击（函数（）{
$（“#类别名称”）.removeClass（“无效”）；
$（“#category desc”）.removeClass（“无效”）；
$（“#类别缩略图”）.removeClass（“无效”）；
var catname=（“#类别名称”）.val（）；
var desc=（“#类别描述”）.val（）；
变量缩略图=（“#类别缩略图”）.prop（“文件”）[0]；
如果（！catname）{
$（“#类别名称”）.addClass（“无效”）；
返回；
}
如果（！desc）{
$（“#category desc”）.addClass（“无效”）；
返回；
}
如果（缩略图==null）{
$（“#类别缩略图”）.addClass（“无效”）；
返回；
}
如果（$.iArray（缩略图[“type”]，validImageTypes）替换代码中缺少此$：）

$（“#保存类别”）。单击（函数（）{
$（“#类别名称”）.removeClass（“无效”）；
$（“#category desc”）.removeClass（“无效”）；
$（“#类别缩略图”）.removeClass（“无效”）；
var catname=$（“#类别名称”）.val（）；
var desc=$（“#类别描述”）.val（）；
var缩略图=$（“#类别缩略图”）.prop（“文件”）[0]；
如果（！catname）{
$（“#类别名称”）.addClass（“无效”）；
返回；
}
如果（！desc）{
$（“#category desc”）.addClass（“无效”）；
返回；
}
如果（缩略图==null）{
$（“#类别缩略图”）.addClass（“无效”）；
返回；
}
if（$.iArray（缩略图[“类型”]，validImageTypes）
$("#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

    });