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

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

var-wid=*20//20是一颗星的宽度，注释->评级
//给了我对那个评论的评价。
jQuery（函数（$）{
$（“.rating star”）.css（'width'，wid）；//根据计算的wid设置宽度。
});

由于只有一个星级，所有评论都获得相同的星级。 我如何创建尽可能多的评级星级实例？

---

提前谢谢！伟大的社区

实际上，您不需要创建与注释数量相同的类

<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>

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

例如，创建.rating1到.rating5，当您遍历并创建通常刚刚给出的元素.ratingstar时，将其用于类：

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

等等

或者。。。不那么可怕/慢的方式：

如果您现在有class='rating-star'，还可以将rating='rating$>'设置为自定义标记。然后：

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

---

…使用与上面相同的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>

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

例如，创建.rating1到.rating5，当您遍历并创建通常刚刚给出的元素.ratingstar时，将其用于类：

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

等等

或者。。。不那么可怕/慢的方式：

如果您现在有class='rating-star'，还可以将rating='rating$>'设置为自定义标记。然后：

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

---

…使用与上面相同的CSS。

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

工作

因此，示例HTML项如下所示：

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

---

你的CSS可以使用一个星型图像，背景重复。

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

工作

因此，示例HTML项如下所示：

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

---

你的CSS可以使用星星图像，背景可以重复。

为什么不直接设置评级星星的宽度属性呢？如果你有100条评论，那就意味着你要运行100个CSS选择器来完成一些本来可以与之一起完成的事情HTML@ColinMorelli如何直接设置宽度属性？我在那里抓不到你。当你打印星星时：

@ColinMorelli啊。。太好了！我不是那样想的！谢谢你的提示！为什么不直接设置评级星的宽度属性呢？如果你有100条评论，那就意味着你要运行100个CSS选择器来完成一些本来可以与之一起完成的事情HTML@ColinMorelli如何直接设置宽度属性？我在那里抓不到你。当你打印星星时：
@ColinMorelli啊。。太好了！我不是那样想的！谢谢你的提示！直接设置style=“width:？”比我的第一个示例更便于浏览器下载数据。如果您只需在已创建的类的基础上设置另一个类，您将既高效又准确。直接设置style=“width:？”比我的第一个示例更便于浏览器下载数据。如果您只是在已经创建的类的基础上设置另一个类，那么您将既高效又准确。