0

私のウェブサイトには、人々がそこに評価を出すことができるサーバル結果のページがあります。

ページ上の 1 つの評価リストではすべて正常に動作しますが、複数の場合、ホバーする正しいリスト (これ) を選択することで少し問題が発生しました。現在、ホバーされるのは常にhtmlコードの最初のリストです（カーソルを2番目の評価リストに最初に置くと、ホバーします）。

html:

<ol class="rating" data-rating="4">
<li class="Arad5fQEnoZlv9E59d"><a title="Super boring" class="rate starOn" id="1">1 star</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Boring" class="rate starOn" id="2">2 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Nice" class="rate starOn" id="3">3 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Cool" class="rate starOn" id="4">4 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Super cool!" class="rate star" id="5">5 stars</a></li>
<div class="response">Score 4 By 2  ratings</div>
</ol>

良い仕事をしない私のjavascriptの部分：

$('ol.rating li', this).hover(function(){
            var id      = $('a', this).attr('id');
            var counter = 1;
            var salt    = $(this).attr('class');

            console.log('ol.rating li.'+salt);

            $('ol.rating li.'+salt).each(function(i){
            if (id >= counter) {
                $('a#'+counter).addClass("starHover");
            } else {
                $('a#'+counter).removeClass("starHover");
            }
            counter++;
            });
    });

私の質問が少し明確であることを願っています:)

前もって感謝します！ニック

4

3 に答える 3

4

あなたのコードは正しく動作しています (this最初の行からキーワードを削除しました): http://jsfiddle.net/yAwZz/

すべての<li>要素で同じクラスをコンソールに出力しています。これが混乱の元になるのでしょうか？

アップデート：

id複数の HTML 要素に同じものを使用していますが、これは決して良い考えではありません。idattribute は一意の要素識別子である必要があります。

.index()および.slice() jQuery メソッドを使用してコードを簡素化し、ID を使用せずに期待どおりに動作させることができます。ホバーの代わりにmouseenterイベントを使用したことに注意してください。hover は、この場合は不要な mouseenter と mouseleave の両方で呼び出されます。

$('ol.rating li').mouseenter(function(){
    var $lis = $(this).siblings("li").andSelf();
    var id   = $(this).index();

    $lis.removeClass("starHover");
    $lis.slice(0, id + 1).addClass("starHover");
});

jsfiddle で動作するコードを確認できます: http://jsfiddle.net/yAwZz/5/

于 2013-02-19T11:22:45.473 に答える
0

コードを更新して、liだけを使用し、ホバー内からコンテキストを把握しました。このフィドルを確認してください：http://jsfiddle.net/yAwZz/2/

$('li').hover(function(){
        console.log("hover");
        var id      = $('a', this).attr('id');
        var counter = 1;
        var salt    = $(this).attr('class');
        // get the context here.

        var parent = $(this).parent();
        console.log('ol.rating li#'+id);

        // remove the class for all elements by default.
        $('a').removeClass("starHover");

        // use the context here for adding the class
        $('li.'+salt, parent).each(function(i){
        if (id >= counter) {
            $('a#'+counter, parent).addClass("starHover");
        } else {
            $('a#'+counter, parent).removeClass("starHover");
        }
        counter++;
        });
});
于 2013-02-19T11:46:05.437 に答える
0

レーティングのクラス名を変えてみてください。元：

<ol class="rating1" data-rating="4">
<li class="Arad5fQEnoZlv9E59d"><a title="Super boring" class="rate starOn" id="1">1 star</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Boring" class="rate starOn" id="2">2 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Nice" class="rate starOn" id="3">3 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Cool" class="rate starOn" id="4">4 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Super cool!" class="rate star" id="5">5 stars</a></li>
<div class="response">Score 4 By 2  ratings</div>
</ol> 
<ol class="rating2" data-rating="4">
<li class="Arad5fQEnoZlv9E59d"><a title="Super boring" class="rate starOn" id="1">1 star</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Boring" class="rate starOn" id="2">2 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Nice" class="rate starOn" id="3">3 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Cool" class="rate starOn" id="4">4 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Super cool!" class="rate star" id="5">5 stars</a></li>
<div class="response">Score 4 By 2  ratings</div>
</ol>
于 2013-02-19T11:25:28.747 に答える