1

ユーザーのコメントと評価を表示するこのコードブロックを実行するには、同じcssクラスの複数のインスタンスを作成する必要があります（評価では、コメントの評価に従って点灯している星の幅を設定します）したがって、cssクラスのインスタンスをできるだけ多く作成する必要がありますコメントがあるので。

<script>
var wid=<?=$comment->rating?>*20; //20 is the width of 1-star, comment->rating 
                                      //gives me rating of that particular comment.   
jQuery(function($){
$(".rating-star").css('width',wid);  //setting width according to calculated wid.
});
</script>

レーティングスタークラスは1つしかないため、すべてのコメントに同じスターレーティングが付けられます。コメントと同じ数の評価スタークラスのインスタンスを作成するにはどうすればよいですか？前もって感謝します！素晴らしいコミュニティ！

4

2 に答える 2

3

これを行う別の方法は、データ属性を使用して、そこに評価をエコーアウトすることです。

jsFiddleでデモを実行しています。

したがって、HTMLアイテムの例は次のようになります。

<li>
    <p>item one</p>
    <span class="rating-star" data-rating="1"></span>
</li>

そしてあなたのJS機能：

(function () {

    // cache the selector
    $ratings = $('.rating-star');

    // run foreach on selector
    $ratings.each(function (index) {

        // variables
        var el = $(this),
            rating = el.data('rating'),
            width = rating * 20;

        // apply width
        el.css('width', width + "px");

    });

})();

また、CSSは、background-repeatを使用して星の画像を使用できます。

于 2013-03-06T19:36:46.320 に答える
2

実際には、コメントがあるほど多くのクラスを作成する必要はありません。

これが私が意味することです、そしてこれをするいくつかの方法があります。ここに2つあります：

たとえば、.rating1から.rating5を作成し、通常は.rating-starを指定して要素を作成するときに、これをクラスに使用します。

class="rating-star rating<? $comment->rating $>"

次にCSSで：

.rating1 { width: 20px; }
.rating2 { width: 40px; }

..等

または...それほど素晴らしい/遅い方法：

現在class='rating-star'がある場合は、カスタムタグとしてrating='rating$>'も設定します。それで：

$(".rating-star[rating]").each(function(){ 
    $(this).addClass("rating"+$(this).attr("rating") 
})

...上記と同じCSSを使用します。

于 2013-03-06T19:21:43.440 に答える