jQueryリスナーを作成してマークアップを反復する方法

Question

要素（星評価）に簡単なツールチップを作成したいと思っています。開始するたびにマウスを移動し、別のメッセージが表示されるようにします。

私が直面している問題は、星印の出力が各星に一意の識別子を与えるわけではないので、私は星のコレクションごとに繰り返し、各星にリスナーを適用する必要があります。

各星1-5は同じメッセージを持ちます。星1 =メッセージ1、星2 =メッセージ2など

誰かが助けてくれる人なら、リスナーを作成し、その特定の星にhtmlとメッセージを適用する方法を知りたいと思いますこれはjQueryで行います。

ここ

は星マークアップ出力である

<div class="stars"> 
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled"> 
     <a title="">1</a> 
    </div> 
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled"> 
     <a title="">2</a> 
    </div> 
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled"> 
     <a title="">3</a> 
    </div> 
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled"> 
     <a title="">4</a> 
    </div> 
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled"> 
     <a title="">5</a> 
    </div> 

    <input type="hidden" value="5" name="rate_overall" disabled=""/> 
</div> 

おかげ

Answer 1

あなたは（異なる要素について異なっている$(this)を使用して）各要素に同じイベントリスナーをバインドし、それが実行されますときにテキストを確認することができます：

$(".ui-stars-star").mouseover(function() { 
    var text = $(this).find("a").text(); // e.g. "1" or "2" 

    // now use `text` to fetch the correct message and show it 
}); 

Answer 2

なぜ反復するのですか？単一の呼び出しが動作しますので、あなたの星のためのクラスがあります。

$('.ui-stars-star') 
    .on('mouseenter', function() { 
    ... 
    }) 
    .on('mouseleave', function() { 
    }) 

しかし、このことは特に効果的な、それはそれでそのクラスを持っている一つ一つの要素のハンドラーを登録するので。つまり、あなたの現在のコードがやることだ。

トレードオフは.onの3つのパラメータバージョンを使用して、イベントの委任を使用することです：

$('.ui-stars-star', document, function() { ... }); 

CPU効率がされているが、ここでの欠点 - jQueryので委任ハンドラシステムは、一つ一つのマウスの動きのために呼び出されますページ上に

Answer 3

index()機能を使用できます。すなわち：

$('.ui-stars-star').mouseenter(function() { 
    switch ($(this).index()) { .. 
} 

Answer 4

あなたは、そのテキストで要素をつかむためにjQueryの:containsセレクタを使用することができます。

$(".ui-stars-star a:contains(1)") 
$(".ui-stars-star a:contains(2)") 
...so on