                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

求看看，哪里出错了

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>自定义一个jquery插件</title>
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>

    <body>
        <div>
            <h1>自定义一个JQuery插件</h1>
            <ul id="u1">
                <li>Part1</li>
                <li>Part2</li>
                <li>Part3</li>
            </ul>
        </div>
        <script type="text/javascript">
           (function($){
               $.fn.extend({
                   var def_col="#ccc";
                   var lst_col="#fff";
                   li_col=(li_col==undefined) ? def_col;lst_col;
                   $(this).find("li").each(function(){
                       $(this).mouseover(function(){
                           $(this).css("background-color":li_col);
                       }).mouseout(function(){
                           $(this).css("background-color":lst_col);
                       })
                   })

              return$(this);
               }
               })

               })(jQuwery)
        </script>
    </body>

</html>

hanhua

2015-05-23

源自：jQuery基础课程 11-11

关注问题我要回答

437

操作

收起

2 回答

hanhua 提问者
2015-05-26

好吧，谢谢

0 回复有任何疑惑可以回复我~

收起回答

不断滴自我催眠
2015-05-26

错误太多了··

你自定义的jquery方法得加个方法名啊内容写到方法里
li_col=(li_col==undefined) ? def_col;lst_col; //def_col后面的应该是冒号而不是封号
$(this).css("background-color":li_col); //里面的应该是逗号而不是冒号
最后})(jQuwery) 这里应该是 jQuery

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8" />
        <title>自定义一个jquery插件</title>
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>
 
    <body>
        <div>
            <h1>自定义一个JQuery插件</h1>
            <ul id="u1">
                <li>Part1</li>
                <li>Part2</li>
                <li>Part3</li>
            </ul>
        </div>
        <script type="text/javascript">
           (function(){
               $.fn.extend({
                    "focusColor": function(li_col) {
                        var def_col="#ccc";
                        var lst_col="#fff";
                        li_col=(li_col==undefined) ? def_col : lst_col;
                        $(this).find("li").each(function(){
                            $(this).mouseover(function(){
                                $(this).css("background-color",li_col);
                            }).mouseout(function(){
                                $(this).css("background-color",lst_col);
                            })
                        })
                        return $(this);
                     }
               });
            })(jQuery);
            $(function(){
                $("#u1").focusColor();
            })
        </script>
    </body>
 
</html>