Question

我有一个TD元素，不会将其背景更改为图像。我正在使用JQUERY的ToggleClass。

以下是我正在使用的两种不同的CSS样式：

.style22
  {
      height: 16px;
      width: 237px;
      background-image: url('../Images/Red-Error-Box.png');
      background-repeat: no-repeat;
  }
  .style23
  {
      height: 16px;
      width: 237px;
      background-image:none
  }

这是我用来切换类的函数，但它不会翻转。：

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

  var emailEXP = /^([A-Za-z0-9_\+\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

      if (!emailEXP.test(($("#tbEmail").val()))) {
          $('#EmailErrorMSG').toggleClass('style22');
          $('#EmailErrorMSG').show();
     }     

  }

  </script>

以下是HTML标记：

 <tr>
    <td id="EmailErrorMSG" nowrap="nowrap" class="style23"></td>
 </tr>


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

感谢您的帮助。

Answer 1

您应该切换这两个类，以便任何时候只应用一个..

$('#EmailErrorMSG').toggleClass('style22 style23');

Answer 2

样式23中的

：让它变得重要...... 背景图像：无重要

你不需要高度和宽度。

切换时，两个类都在该元素上。

但是如果你想做得更好，你可以创建不同的类：创建一个只有高度和宽度的类

和一个类有图像设置。然后只需切换第二节课。

.style22
  {
      height: 16px;
      width: 237px;

  }
  .style23
  {
      background-image: url('../Images/Red-Error-Box.png');
      background-repeat: no-repeat;
  }

背景图像和toggleclass

2 个答案: