0

スターレビューメカニズムを作成しています。さて、私の質問は、ハーフスターをどのようにキャプチャするのですか? これは、1 つの星を追加し、各カテゴリの星の数を示すバーを変更するために行っていることです。これはうまく機能しています。昨夜、バグを修正してくれた Barmar に感謝します。しかし、ハーフスターは本当に私を悩ませています。jqueryはこんな感じ

$('.star').click(function () {
        var num = parseInt($('.likes').eq($(this).index('.star')).text());
        $('.likes').eq($(this).index('.star')).text(num + 1);

        $(this).addClass('active').off('click');
        $(this).prevAll().addClass('active').off('click');
        checkNumber(num+1);

    });

ここにフィドルがあります http://jsfiddle.net/sghoush1/VU3LP/54/

私がこれをしているとき

$('.likes').eq($(this).index('.star')).text(num + .5);

インデックスを失っています

4

1 に答える 1

1

ここでかなりの変更を加えましたが、基本的には 5 レベルの星を作るために半星を 10 個作成しました。ユーザーが半分をクリックすると、対応する星レベルの合計が 0.5 または 1.0 増加します (星のどちらの半分がクリックされたかによって異なります)。

あなたが持っていたのと同じようにクリックイベントを削除しましたが、より良い方法は、ユーザーがもう一度クリックできるようにしてから、最初のクリックから計算を元に戻すことです. また、一般的なコードのクリーンアップなどにも注意してください。

短縮された関連する HTML は次のとおりです。

<div id="stars">
    <div class="star leftHalf"></div>
    <div class="star rightHalf"></div>
[ ... ]

<div class="barHolder">
    <table>
        <tr>
            <td>1 star</td>
            <td class="bar"></td>
            <td class="likes">20</td>
        </tr>
        [ ... ]

CSS

.star {
    height:20px;
    width:10px;
    float:left;
    margin-right:5px;
    cursor:pointer;
}
.star.leftHalf{
    margin-right:0px;
}

完全な JavaScript / jQuery

var baractive = $('<div class="barActive"></div');
baractive.appendTo('.bar');

function checkNumber() {
    $(".likes").each(function () {
        var valueCurrent = parseFloat($(this).text()),
            barActive = $(this).prev(".bar").children(".barActive");

        if (isNaN(valueCurrent) || valueCurrent <= 20) {
            barActive.css('width', 30);
        } else if (valueCurrent <= 60) {
            barActive.css('width', 80);
        }else if (valueCurrent <= 70) {
            barActive.css('width',120);
        }
    });
}
checkNumber();

$('.star').click(function () {
    var starIndex = $("#stars div").index( $(this) ), // current half clicked; 0-9
        starLevel = Math.ceil( ( starIndex+1 )/2 )-1, // current star clicked; 0-4
        valCur = parseFloat( $('.likes').eq(starLevel).text() ), // current likes value
        isHalfStar = starIndex % 2 ? false : true, // is this a half click (left side)?
        valNew = valCur + (isHalfStar ? 0.5 : 1.0); // new likes value

    $('.likes').eq(starLevel).text(valNew);

    $(".star").removeClass("active").off("click");
    $(this).addClass('active');
    $(this).prevAll().addClass('active');
    checkNumber();

});

そして、動作中のjsFiddle http://jsfiddle.net/daCrosby/VU3LP/64/

于 2013-04-15T04:04:21.340 に答える