在文本框為空后使用JQUERY添加圖像

Question

我試圖在單擊按鈕后添加圖像。 但是，我似乎無法獲得圖像的屬性來顯示不同的.png文件。 基本上，如果文本為空白，則顯示綠色對勾，否則顯示紅色圖標。 我想驗證文本，然后驗證表達式是否為電子郵件格式。 但是現在，當文本框為null時，我似乎無法更改圖像。

這是我在頁面開頭加載的內容：

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

謝謝你的幫助。

Answer 1

您已經更改了屬性，但是圖像仍處於隱藏狀態。

您需要添加$（'＃imgEmail'）。show（）;

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

Answer 2

您還不需要顯示這張圖片嗎？

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