Question

我必须创建同一个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>

由于只有一个评级星级，所有评论都获得相同的星级评分。我如何创建与评论一样多的评级星级实例？提前致谢！伟大的社区！

Answer 1

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

工作DEMO on 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可以使用带有背景重复的星形图像。

Answer 2

实际上，您不需要创建与注释一样多的类。

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

例如，创建.rating1到.rating5，当你通过并创建通常只给出.rating-star的元素时，将其用于该类：

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

然后在CSS中：

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

...等

或者......不那么棒/慢的方式：

你现在有class ='rating-star'，同时设置rating ='rating $＆gt;'作为自定义标签。然后：

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

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

如何创建一个css类的多个实例？

2 个答案: