自定义插件问题
请教各位，看看错哪儿？我不太懂参数问题
(function($){
$.extend({
"focusColor": function(color){
$("li").hover(function(color){
$(this).css("background-color",color)
},
function(){
$(this).css("background-color","")
});
}
});
})(jQuery)
$.focusColor("orange");
2 回答
<!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 charset="utf-8">
<title>自定义对象级别插件</title>
<!-- <link href="style.css" rel="stylesheet" type="text/css" /> -->
<script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
<script src="http://www.imooc.com/data/jquery.lifocuscolor.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">对象级别的插件</span>
</div>
<div class="content">
<ul id="u">
<li><span>橘子</span><span>水果</span></li>
<li><span>芹菜</span><span>蔬菜</span></li>
<li><span>香蕉</span><span>水果</span></li>
</ul>
</div>
</div>
<script type="text/javascript">
(function($){
$.extend({
"focusColor": function(color){
console.log(color); //orange
$("li").hover(function(){
// $("li").hover(function(color){
// console.log(color);//p.Event {originalEvent: MouseEvent, type: "mouseenter", timeStamp: 1761.89, jQuery1820675307446589613: true, toElement: span…}
console.log(color); //orange
$(this).css("background-color",color);
},
function(){
$(this).css("background-color",'');
});
}
})
})(jQuery);
$.focusColor("orange");
</script>
</body>
</html>先说一下错误，代码调试不出来时，就打bug，看输出是什么，再分析。
运行LZ的代码，当$("li").hover(function(color)中传入color参数时，让其输出，结果是p.Event {originalEvent: MouseEvent, type: "mouseenter", timeStamp: 1761.89, jQuery1820675307446589613: true, toElement: span…}，不是我们传入的参数‘orange’，说明传入的参数有问题。这时，
"focusColor": function(color){
console.log(color); //orange
$("li").hover(function(color){在两者之间打log,发现输出的color就是'orange'。
因为传入的参数orange是全局变量，没有必要再传入函数中的子函数，所以在hover里不传参。
举报
0/150
提交
取消
