фоновое изображение и класс переключения

Question

У меня есть элемент TD, который не меняет свой фон на изображение. Я использую ToggleClass из JQUERY.

Вот два разных стиля 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: просто сделайте это важным ... background-image: none! Important

вам не нужны высота и ширина.

когда вы переключаете оба класса на этоelement.

но если вы хотите сделать это еще лучше, вы можете создать разные классы: создайте один класс, который имеет только высоту и ширину

, и один класс, который имеет настройки изображения.затем просто переключите второй класс.

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

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