1

以下に示すように、簡単な星評価スクリプトがあります。私の問題は、ユーザーが投票すると、投票を変更できないことです (気が変わって、送信する前に投票を変更したい場合)。私のスクリプトは次のようになります。

$(function() {
$('a').hover(
// Handles the mouseover
function() {
        $(this).prevAll().andSelf().addClass('hoverstar');
        $(this).nextAll().removeClass('visited');
},
// Handles the mouseout
function() {
    $(this).prevAll().andSelf().removeClass('hoverstar');
    $(this).nextAll('a').removeClass('hoverstar');
    $(this).nextAll('a').removeClass('visited');
}
);

$('a').click(
function() {                              
    $(this).prevAll('a').andSelf().addClass('visited');
    $(this).nextAll('a').removeClass('visited');
}
);
});

スタイルシートは次のとおりです。

 .rate_widget ul
{
    background: url('star-white16.gif') repeat-x;
}
.rate_widget a.visited{
    background: url('star-red16.gif') repeat-x;
}
.rate_widget a.hoverstar{
    background: url('star-gold16.gif') repeat-x;
}

星は次のようにリンクとして表示されます。

<div class='rate_widget'>
<ul>
    <li><a href='#' class='one-star' id="1">1</a></li>
    <li><a href='#' class='two-stars' id="2">2</a></li>
    <li><a href='#' class='three-stars' id="3">3</a></li>
    <li><a href='#' class='four-stars' id="4">4</a></li>
    <li><a href='#' class='five-stars' id="5">5</a></li>
</ul>
</div>
4

2 に答える 2

1

これは最善のコードではありませんが、正しい方向に進むはずです。

$('a').click(
    function() {
        if ($(this).parent().parent().attr('voted') !== '1') {
            $(this).prevAll('a').andSelf().addClass('visited');
            $(this).nextAll('a').removeClass('visited');
            $(this).parent().parent().attr('voted', '1');
        }
    }
);

基本的に、投票するためにクリックが行われると、「投票済み」属性が UL 要素に追加されます。その値が設定されている場合にもう一度クリックすると、投票が再び行われることはありません。星が再び強調表示されないように、ホバリング時にもこれを確認する必要があります。

理想的には、よりきれいなものが必要です.parent().parent()。ページに 1 つ星の評価がある場合は、ID を使用してください。

于 2013-08-22T14:32:01.687 に答える
0

$post()アラートの代わりにを追加すると、PHP と正常に通信する非常に単純な評価システムがあります。注意すべきことは、星のグラフィックが反転した PNG であることです。

.star {
    float: left;
    width: 21px;
    height: 20px;
    background-image: url('http://www.libertyeaglearms.com/graphics/star.png');
}

星の外側の領域は白なので、css で背景色を変更すると、星の色が変わって見えます。これがうまくいくかどうか見てみましょう。

JSFIDDLE

于 2013-08-22T22:54:58.973 に答える