jQuery hover 函数 -- 通过绑定变量"handlerInOut"来切换方法

本帖最后由 lslyhj 于 2014-07-27 17:46:29 编辑

解决方案 »

  1.   

    <html>
    <head>
    <style type="text/css">
    .s2{background-color:yellow!important;}
    .s4{background-color:aqua;}
    </style>
    <script type="text/javascript" src="jquery-1.7.2.js"></script><head/>
    <body>
    <div class="s4" >hello jQuery 4</div><br />
    <script type="text/javascript">
    // var handlerInOut = function(){alert("111");};
    function handlerInOut(){
            $(this).toggleClass('s2');
    }
    $('.s4').hover(handlerInOut);
    </script>
    </body>
    </html> 
    貌似你绑定事件的时候页面还没加载完呢 第一个问题是因为你绑定了mouseover mouseleave hover
      

  2.   

    第一、你事件绑定像楼上说的，事件绑定时页面还没有加载完
    第二、针对你第一个问题，你先绑定了$('.s4').bind('mouseover mouseleave',handlerInOut);
                 又绑定$('.s4').hover(handlerInOut);这两个效果一样，你相当于同一个事件执行了两次
    第三、针对第二个问题，没啥可说了，按上面改完就ok了
    附代码<html>
    <head>
    <style type="text/css">
    .s2{background-color:yellow!important;}
    .s4{background-color:aqua;}
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    // var handlerInOut = function(){alert("111");};$(document).ready(function(){
    function handlerInOut(){
    //alert("222");
            $(this).toggleClass('s2');
    }
    $('.s4').bind('mouseover mouseleave',handlerInOut);
    //$('.s4').hover(handlerInOut);
    });</script>
    <head/>
    <body>
    <div class="s4" >hello jQuery 4</div><br />
    </body>
    </html>