1

css と jQuery を使用して評価システムを構築しようとしています。

http://jsfiddle.net/naZ9u/2/

    <ul id="ratecv">
                <li id="star1" class="star starred"></li>
                <li id="star2" class="star"></li>
                <li id="star3" class="star"></li>
                <li id="star4" class="star"></li>
                <li id="star5" class="star"></li>
        </ul>

クラス スターのリスト アイテムがホバーされている場合、ユーザーがリスト アイテムをクリックせずに離れた場合、上のすべてのリスト アイテムに「スター付き」クラスを適用する必要があります。以前に適用されたすべての「スター付き」クラスを削除する必要があります。

ユーザーが特定のスターをクリックすると、「スター付き」のすべてのクラスが残るはずです。

これは、jquery を使用して実行しようとしている単純な評価システムです。

mouseenter、mouseleave、parent() メソッドを使用しようとしていますが、これを機能させることができません。

何か案は

4

2 に答える 2

0

これは rate ができることではありませんが、コードに基づいて、これを取得できます。

CSS : 

.star:hover, .star.starred, .star.current {
    background-position: -200px 0;
}

JS:

$('#ratecv li.current').prevAll(".star").addClass("current");

$('#ratecv li').mouseenter(function () {
    $(this).addClass('starred');
    $(this).prevAll(".star").addClass("starred");
})

$('#ratecv li').mouseleave(function () {
    $('#ratecv .starred').each(function () {
        $(this).removeClass("starred");
    });
});

$('#ratecv li').click(function () {
    $('#ratecv li.current').removeClass("current");
    $(this).addClass("current")
    $(this).prevAll(".star").addClass("current");
});

フィドル: http://jsfiddle.net/naZ9u/3/

于 2013-09-13T13:53:31.450 に答える