自定义jQuery插件以突出显示文本_Jquery_Jquery Plugins

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

jquery jquery-plugins

自定义jQuery插件以突出显示文本,jquery,jquery-plugins,Jquery,Jquery Plugins,我是jquery插件的新手。我读了一些文章，决定试试看。我编写的插件突出显示了悬停的elemet。这是我的插件上的代码 // file name hello.js (function($){ $.fn.hello=function(option){ var opts=$.extend({},$.fn.defaults,option); return this.each(function(){ $this=$(this); $this.h

我是jquery插件的新手。我读了一些文章，决定试试看。我编写的插件突出显示了悬停的elemet。这是我的插件上的代码

 // 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>

现在的问题是：我不知道这里出了什么问题，但代码只突出显示了列表中的最后一个li。

任何帮助都将不胜感激。

试着给每个Li一个id，并像这样调用函数

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

})

我明白了

这是工作代码

       (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

我认为这不是一个好的选择，因为在我的页面上可能有几个列表。在这种情况下，我必须给每个李一个唯一的id。无论如何，thanx需要帮助

       (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);