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