使用JQUERY添加图像并在文本框为空后

我试图在单击按钮后添加图像。但是，我似乎无法获得图像的属性来显示不同的.png文件。基本上如果文本是空白的，然后显示一个绿色的检查，否则显示一个红色的图标。我想验证文本，然后验证表达式是否为电子邮件格式。但现在我似乎无法让图像在文本框为空时更改。使用JQUERY添加图像并在文本框为空后

这里是我加载页面的开头是什么：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#imgEmail').hide(); 
    }); 
</script>

这里是我的逻辑按钮被点击后：

<script type="text/javascript"> 
    function validateText() { 

     if (!$("#tbEmail").val()) { 
      $('#imgEmail').attr('src', '../Images/Red-Error-Icon.png'); 
     } else {    
      $('#imgEmail').attr('src', '../Images/Green-Check-Icon.png');   
     } 
    } 
</script>

下面是texbox的HTML，图像和按钮：

<asp:TextBox ID="tbEmail" runat="server"></asp:TextBox> 

<img id="imgEmail" alt=""> 

<asp:Button ID="btnSignUp" runat="server" OnClientClick="validateText()"/>

感谢您的任何帮助。

来源

2011-03-29 MdeVera

您是否还需要显示此图像？

$('#imgEmail').show();

来源

2011-03-29 14:41:16 shanethehat

我觉得你会遇到麻烦，因为这是一个页面请求。我知道asp很少，但是当页面重新加载$（document）ready（）函数时，会隐藏该元素。这将覆盖您在验证中显示的节目。也许你应该检查图像是否隐藏它之前设置了源属性？ – shanethehat 2011-03-29 16:05:52

您已更改属性，但图像仍隐藏。你需要添加$（'＃imgEmail'）。show（）;你需要添加$（'＃imgEmail'）。

<script type="text/javascript"> 
     function validateText() { 

      if (!$("#tbEmail").val()) { 
       $('#imgEmail').attr('src', '../Images/Red-Error-Icon.png'); 
      } else {    
       $('#imgEmail').attr('src', '../Images/Green-Check-Icon.png');   
      } 
    $('#imgEmail').show(); 


     } 
    </script>

来源

2011-03-29 14:41:23

谢谢安德鲁！这工作，但由于某种原因，图片不会在回发后显示。我曾尝试将图像和文本框放在更新面板中，但似乎不起作用。我用Telerik控件使用.NET。我曾尝试使用.NET更新面板与Telerik的更新面板。 – MdeVera 2011-03-29 14:51:59

我会建议设置CSS属性显示：无;而不是在页面加载时使用jQuery隐藏元素。这应该可以解决问题。 – 2011-03-29 15:01:33

再次感谢！我创建了以下样式：.style7 {width：16px; height：16px;显示：无; }并应用这种风格，然后我尝试addClass或toggleClass，调用不具有display：none的不同风格。但似乎仍然没有工作。我确实看到图像发生了适当的变化，但回传后图像空白。 – MdeVera 2011-03-29 15:34:37

使用JQUERY添加图像并在文本框为空后

回答

相关问题