如何创建一个CSS类的多个实例
how to create multiple instance of a css class?
我必须创建同一个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")
})
…
相关文章:
- ES6构造函数返回基类的实例
- CSS-如何定位内容数据标题
- 窗口大小html css
- 如果文本字段为空,则使用JavaScript应用CSS样式
- 动画.CSS重播
- 有没有一种方法可以防止img get请求使用css或js发生
- CSS表格:从列平移到整个表格宽度
- KnockoutJS-组件-多个实例
- 使用jQuery在类的每个实例上添加随机CSS
- 无法在单个 HTML 页面上显示 Java/CSS 图像库的多个实例
- 定位 CSS 类的特定实例
- css中类的第二个实例的快捷方式
- Meteor不渲染css,并且在使用外部DDP Meteor实例时不断重新加载应用程序
- 更新CKEditor'在实例已经创建之后,通过JavaScript创建的CSS
- CSS转换持续时间不适用于转换效果的第一个实例
- 当标记有多个实例时,如何为类的一个实例设置CSS ?
- 有没有一种方法可以让一个CSS类的实例出现在多个元素上,但一次只能出现一个元素?
- 带有css和javascript资源的本地Tomcat实例
- 如何创建一个CSS类的多个实例
- 星级评级系统:CSS只在一个实例上工作