Question

我是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。任何帮助都将受到高度赞赏。

Answer 1

我明白了。

这是工作代码。

       (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

Answer 2

尝试给每个Li一个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()});

}）;

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

2 个答案: