La función de clase de alternancia de Jquery no funciona

Hola a todos, quiero cambiar la clase de mi div en los controladores de eventos como pasar el mouse sobre el mouse o hacer clic () ... Pero tengo un problema que no cambia el efecto de alternar clase. Aquí está el código, por favor ayúdenme gracias.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org        /TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>Untitled Document</title>

   <style type="text/css">


    .hello{

 background:#60C;


}
      .main{
width:300px;
height:300px;
background:#00F;
border-radius:10px;
}
    </style>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
     <script type="text/javascript" >


     $(function() {
        $("#event").bind("mouseover mouseleave", highlight);

        $("#event").bind("click", function(evt) {
             $("#event").toggleClass("hello"); 
            $("#event").unbind("mouseover mouseleave", highlight);
            $("#event").html("<p>You shut off the hover effect!</p>");
        });
    });

    function highlight(evt) {
        $("#event").toggleClass("high");        
    }


   </script> 
</head>

    <div class="main" id="event">
     This is a div click to highlight
     </div>

preguntado el 08 de septiembre de 12 a las 09:09

Tal vez porque no tienes high clase en tu css? -

pero todavía hola clase no funciona tan bien -

1 Respuestas

Su código funciona para estados flotantes pero no tiene un high clase en tu css.

.high {
     property: value
}

Para vincular/desvincular los eventos que puede utilizar on y off métodos:

$(function() {
    $("#event").on("mouseover mouseleave", highlight);

    $("#event").on("click", function(evt) {
        $(this).toggleClass("hello");
        $(this).off("mouseover mouseleave", highlight);
        $(this).html("<p>You shut off the hover effect!</p>");
    });
});

function highlight(evt) {
    $("#event").toggleClass("high");
}

http://jsfiddle.net/t3B5Z/

Respondido el 08 de Septiembre de 12 a las 09:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.