Question

大家好我想在事件处理程序上更改我的div类，例如鼠标移出鼠标或点击（）..但我面临的问题是它不会改变切换类的效果。这里的代码请帮帮我谢谢。

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

Answer 1

您的代码适用于悬停状态，但您的css中没有high类。

.high {
     property: value
}

对于事件的绑定/解除绑定，您可以使用on和off方法：

$(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/

Jquery切换类函数不起作用

1 个答案: