カスタム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>

、今問題：
私がここで間違って何が起こっているか知らないが、コードはリストの最後のLiを強調しています。ご協力いただければ幸いです。

出典

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の良い選択肢ではないと思います。その場合、私は各liにユニークなid.anywayを与えなければならないでしょう。助けを借りて – Alex

私の編集をチェックしてください –

私は恐れていますが、うまくいきませんでした。 – Alex

カスタムjQueryプラグインでテキストをハイライト表示

答えて

関連する問題