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>

由于只有一个评级星级，所有评论都获得相同的星级。如何创建与评论一样多的 rating-star 类实例？提前致谢！很棒的社区！

4

2 回答 2

3

另一种方法是使用数据属性并在其中回显评级。

在 jsFiddle 上工作DEMO 。

因此，示例 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 可以使用带有背景重复的星形图像。

于 2013-03-06T19:36:46.320 回答
2

您实际上不需要创建与评论一样多的类。

这就是我的意思，有几种方法可以做到这一点。这里有两个：

例如，创建 .rating1 到 .rating5，然后在创建通常刚刚给出 .rating-star 的元素时，将其用于类：

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

然后在 CSS 中：

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

..ETC

或者......不太棒/更慢的方式：

在您现在拥有 class='rating-star' 的地方，还将 rating='rating $>' 设置为自定义标签。然后：

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

...使用与上述相同的 CSS。

于 2013-03-06T19:21:43.440 回答