Home/ Questions/Q 7762665
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T14:27:58+00:00

i’m kind of new to jquery plugins. i read some articles and decided to

  • 0

i’m kind of new to jquery plugins. i read some articles and decided to try my hands on. the plugin i wrote highlights the elemet on hovering.
here is the code on my plugin.

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

and here is the 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>

and now the problem:
i dont know what is going wrong here but the code highlights only the last li of the list.
any help will be highly appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    i figured it out.

    here is the working code.

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

    this just work fine 😀

    • 0