3

こんにちはすべて私はマウスオーバーマウスアウトやclick（）のようなイベントハンドラーで私の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>

4

1 に答える 1

3

highコードはホバー状態で機能しますが、cssにクラスがありません。

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

于 2012-09-08T08:54:32.090 に答える