自定義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插件來突出顯示文本

回答

相關問題