如何创建一个CSS类的多个实例 - how to create multiple instance of a css class?

how to create multiple instance of a css class?

本文关键字：实例 CSS 何创建创建一个 | 更新日期: 2023-09-27

我必须创建同一个css类的多个实例来运行这个显示用户评论和评级的代码块。(在评级中，我根据评论的评级设置了点亮星星的宽度)所以我必须创建尽可能多的css class实例，因为有评论。

<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类实例?提前感谢!大社区!

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

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.

实际上，您不需要创建那么多的类，因为您有注释。

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

例如创建。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") 
})

…