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

求解，哪里出了问题？

serebi

2016-03-24

源自：jQuery基础课程 11-11

关注问题我要回答

232

操作

收起

2 回答

迈chael 回答被采纳 +3 积分
2016-03-25

首先$("li")是一个元素集合，你如果用li来绑定事件的话，你需要历遍所有的li。

其次，原生JS里，元素的mouseover属性前面必须加上"on"，否则的话，你获取的元素必须是用jQuery获取的。

也就是说，你要这样写：$.bgcchange($("li:"));你之前只是把一个内容为li的字符串传进去了，而不是li元素。

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

收起回答

serebi 提问者

非常感谢！

2016-03-25 回复有任何疑惑可以回复我~

C是什么
2016-05-14

你这插件没有满足题目要求,这个插件就算实现了,也只是将li背景色设置为某个插件已经写死的固定颜色的插件.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ul列表项子项被选中时获取子项背景颜色的插件</title>
    <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        (function($){
            $.extend({
                setBackColor:function(obj,color){
                    obj.each(function(){
                        var old = $(this).css("background-color");
                        $(this).hover(
                            function(){
                                $(this).css("background-color",color);
                            },
                            function(){
                                $(this).css("background-color",old);
                            }
                            );
                    })
                },
            });            
        })(jQuery);

        $(function(){
            $.setBackColor($("#mUl li"),"orange");
        })


        
    </script>
    <style type="text/css">
        ul{
            width: 150px;
        }
        li{
            background-color: #ccc;
            color: #000;
        }
        
        #tips{
            color: red;
        }
    </style>
</head>
<body>
    <ul id="mUl">
        <li>子项1</li>
        <li>子项2</li>
        <li>子项3</li>
        <li>子项4</li>
        <li>子项5</li>
        <li>子项6</li>
        <li>子项7</li>
        <li>子项8</li>
        <li>子项9</li>
        <li>子项10</li>
    </ul>
</body>
</html>

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

收起回答