Question

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

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

如果用户点击field2然后点击其他地方，我希望field2边框仅变为红色。

现在blur()完美无缺，但它会在每个字段上创建一个红色边框。这是因为我正在使用.input类。任何想法我怎么能这样做而不会得到身份证？ bc我完成后将有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)而不是重复类名。

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

<强> 可选

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

jQuery模糊功能无法正常工作

1 个答案: