jQuery模糊功能不起作用

Question

我正在使用html和jQuery库，试图避免使用核心JavaScript，只是bc我不想将其混合使用

我有3个字段，当用户单击field1时，然后在其他地方单击时，我希望field1边框仅变为红色。

如果用户单击field2，然后单击其他位置，则我希望field2边框仅变为红色。

现在blur()可以正常工作，但是在每个字段上都创建了一个红色边框。 这是因为我正在使用.input类。 任何想法，我怎么能做到这一点而没有身份证？ 公元前完成后，我将有40个字段

html代码：

<asp:TextBox runat="server" id="test1" class="input green" /> <br />
<asp:TextBox runat="server" id="test2" class="input blue" />

jQuery代码：

$(function() {
  $(".input").blur(function() {
    if ($(".input").val().trim() == '')
      $(".input").css('border-color', 'red');
    else
      $(".input").css('border-color', '');
  });
});

Answer 1

使用$(this)而不是重复类名。

 $(function() { $(".input").blur(function() { if ($(this).val().trim() == '') $(this).css('border-color', 'red'); else $(this).css('border-color', ''); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="input"/> <input type="text" class="input"/> <input type="text" class="input"/> 

可选的

也可以代替$(this).val().trim() == ''使用$(this).val().length <= 0