jQuery不获取HTML输入

Question

我有以下html：

<label for="bottlePrice">Desired Price  </label>
  <input type=number class="bottlePrice required" name="bottlePrice" placeholder="$0.00">
<label for="containers">Containers  </label>
  <input type=number class="containers required" name="containers">
<label for="servings">Servings per Container </label>
  <input type=number class="servings required" name="servings">

如果使用以下jquery将这些输入框留空，则尝试将它们变成红色阴影：

$(".bottlePrice, .containers, .servings").blur(function() {
if ($(this).val ==="") {
    $(this).addClass("redClass");
}

其中.redClass是CSS代码段：

.redClass {
background-color: #CDC9C9;
}

但是，这没有产生期望的效果。 我已经使用完全相同的代码在其他输入字段上进行了尝试，并且效果很好，所以我不确定为什么此示例为空。

JSFiddle说我的JavaScript很好。

Answer 1

$(this).val应该是$(this).val()

Answer 2

只需将(this).val更改为(this).val()

$(".bottlePrice, .containers, .servings").blur(function() {
if ($(this).val() ==="") {
    $(this).addClass("redClass");
}

Answer 3

更换

$(this).val

与

$(this).val() 

它应该工作。 这是因为在jQuery中获取我们使用的值

$（this）.val（）