l'image de fond et le toggleclass

Question

J'ai un élément TD qui ne changera pas son arrière-plan à une image. J'utilise ToggleClass de JQUERY.

Voici les deux styles CSS différents que j'utilise:

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

Voici la fonction que je utilise pour activer la classe, mais il ne sera pas Toggle .:

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

Voici le balisage HTML:

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


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

Merci pour toute aide.

Answer 1

dans le style 23: il suffit important ... background-image: aucun importante

vous ne avez pas besoin de la hauteur et la largeur!.

lorsque vous basculez les deux classes sont sur cet élément.

mais si vous voulez le faire encore mieux que vous pouvez créer les classes diffrent: créer une classe qui n'a que la hauteur et la largeur

et une classe l'a les paramètres d'image. puis il suffit de basculer la deuxième classe.

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

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

Answer 2

Vous devez activer les deux classes de sorte que seule l'on applique à tout moment ..

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