用jQuery丢失焦点后显示下一个特定类的对象

我有（我认为）一个简单的问题。我正在用Asp.net构建应用程序，并且我想在用户留下空的文本框后显示一些内容（例如“!!!”）。我无法在Asp.net中使用标准验证组件，因为它阻止了每个回发。用jQuery丢失焦点后显示下一个特定类的对象

我尝试：

<html> 
<head runat="server"> 
    <script src="/Scripts/jquery-2.1.1.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.validation-control-is-not-empty').focusout(function() { 
       if ($(this).val() === '') { 
        $(this).next('.validation-alert').show(); 
       } 
       else { 
        $(this).next('.validation-alert').hide(); 
       } 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <form id="form1" runat="server"> 
     <h1>Validation test</h1> 
     <div> 
      <table> 
       <tr> 
        <td> 
         <asp:TextBox ID="TbName" CssClass="validation-control-is-not-empty" runat="server" /> 
        </td> 
        <td> 
         <div class="validation-alert" style="display: none;">!!!</div> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <asp:TextBox ID="TbMessage" CssClass="validation-control-is-not-empty" runat="server" /> 
        </td> 
        <td> 
         <div class="validation-alert" style="display: none;">!!!</div> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </form> 
</body> 
</html>

聚焦丢失是叫我的功能，但问题是，这样的：

$（本）。接下来（ '验证警报'）

找不到下一个需要的对象......我做错了什么？

感谢您的帮助。

来源

2015-02-24 Jenda Matejicek

因为.validation-alert不是.validation-control-is-not-empty下一个兄弟，他们是相同的tr孩子，这样你就可以找到tr父this，然后在其中找到.validation-alert元素。

$('.validation-control-is-not-empty').focusout(function() { 
    if ($(this).val() === '') { 
     $(this).closest('tr').find('.validation-alert').show(); 
    } else { 
     $(this).closest('tr').find('.validation-alert').hide(); 
    } 
});

可以使用.toggle（）之类

$('.validation-control-is-not-empty').focusout(function() { 
    $(this).closest('tr').find('.validation-alert').toggle($(this).val() === ''); 
});

演示缩短：Fiddle

来源

2015-02-24 08:43:00

真棒......谢谢你的快速反应。 – 2015-02-24 08:50:28

用jQuery丢失焦点后显示下一个特定类的对象

回答

相关问题