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

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

由于只有一个评级星级，所有评论都获得相同的星级评分。如何创建与评论类似的评级星级课程实例？在此先感谢！伟大的社区！

来源

2013-03-06 Rao

为什么不直接在评级星号上设置宽度属性？如果你有100条评论，那就意味着你将运行100个CSS选择器来处理HTML – 2013-03-06 19:11:27

@ColinMorelli如何直接设置width属性？辛特抓住你。 – Rao 2013-03-06 19:14:10

当你打印星星：'

' – 2013-03-06 19:15:33

实际上，您不需要根据您的意见创建多少个班级。

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

通过.rating5例如创建.rating1，和你经历和创建元素通常刚.rating星，用这个类：在CSS

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

然后：

.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-06 19:21:43 digitalextremist

设置style =“width：？”直接是浏览器下载的数据比我的第一个例子更多。如果您只是将其他课程与您已经完成的课程一起进行设置，那么您的效率和准确性都会很高。 – digitalextremist 2013-03-06 19:23:12

这样做的另一种方法是使用数据属性并在其中回显评分。

工作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可以使用明星形象，背景重复。

来源

2013-03-06 19:36:46 stursby

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

回答

相关问题