未捕获的类型错误："#category-name" .val 不是一个函数

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 脚本中。这是我的类别代码.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
});