自定义jQuery插件来突出显示文本

我是jquery插件的新手。我读了一些文章，并决定尝试我的手。我写的插件强调了悬停时的元素。这里是我的插件上的代码。自定义jQuery插件来突出显示文本

// file name hello.js 
    (function($){ 

$.fn.hello=function(option){ 
    var opts=$.extend({},$.fn.defaults,option); 

    return this.each(function(){ 
     $this=$(this); 
     $this.hover(
     function(){$this.css({'border-bottom':opts.borderbottom,'background-color':opts.background})}, 
     function(){$this.css({'border-bottom':'0px','background-color':'#fff'})}); 


     }) 


    } 
$.fn.defaults ={ 
    borderbottom: "1px solid #999", 
    background : "#CCC" 
    } 

})(jQuery);

这里是HTML：

<!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> 
<script src="jquery-1.7.2.js"></script> 
<script src="hello.js"></script> 
<script> 
$(document).ready(function(){ 
$('ul.class1 li').hello(); 
}); 
</script> 
</head> 
<body> 
<ul class="class1"> 
<li>SOMETEXT</li> 
<li>SOMETEXT</li> 
<li>SOMETEXT</li> 
<li>SOMETEXT</li> 
<li>SOMETEXT</li> 
</ul> 
</body> 
</html>

现在的问题：
我不知道是怎么回事错在这里，但代码突出显示只有列表的最后一个礼。任何帮助将不胜感激。

来源

2012-03-30 Alex

我想通了。

这里是工作代码。

 (function($){ 

$.fn.hello=function(option){ 
    var opts=$.extend({},$.fn.defaults,option); 

// /return this.each(function(){ 
    // $this=$(this); 
     //alert($this.toString()); 
    // $this.hover(
    return this.hover(
     function(){$(this).css({'border-bottom':opts.borderbottom,'background-color':opts.background})}, 
     function(){$(this).css({'border-bottom':'0px','background-color':'#fff'})}); 


     //}) 


    } 
$.fn.defaults ={ 
    borderbottom: "1px solid #999", 
    background : "#CCC" 
    } 

})(jQuery);

这只是正常工作：d

来源

2012-04-10 07:16:15 Alex

-2

想给每个立一个ID，并调用这样

<script> 
$(document).ready(function(){ 
$('#li1').hello(); 
$('#li2').hello(); 
$('#li3').hello(); 
$('#li4').hello(); 
$('#li5').hello(); 
}); 
</script>

的功能，你可以简单地尝试这个办法：

$(document).ready(function(){ 
$('ul.class1 li').each(function(){hello()});

}）;

来源

2012-03-30 06:49:10

我想这不会是我的Cuz有页也许是少数列表上一个不错的选择。在那种情况下，我将不得不给每个李一个独特的id.anyway thanx帮助 – Alex 2012-03-30 06:51:41

检查我的编辑 – 2012-03-30 06:56:31

我害怕，但没有工作 – Alex 2012-03-30 06:58:58

自定义jQuery插件来突出显示文本

回答

相关问题