[英]The 5 star ranking “width” % from 0 - 100% in CSS only works with the 20/40/60/80/100 but not for example 70%
I have a problem. 我有个问题。 I work with mustache code to trigger the content. 我使用胡子代码来触发内容。 Now I have a 5 star review rating in the website but to trigger the content without going in the code I made the overlay with the mustache code. 现在我在网站上有一个5星评价评级,但是为了触发内容而不进入代码,我用胡子代码制作了叠加层。 Everything is working fine. 一切都很好。 But if, for example, in the source code the rating is 4.5 stars, it doesn't fill the stars. 但是,例如,如果在源代码中评级是4.5星,它就不会填满星星。 But in the source code the class is changed to bcrating4.5
. 但是在源代码中,类被更改为bcrating4.5
。
This is my code: 这是我的代码:
<span class="rating bcrating{{rating}}"></span>
The rating
class is the original code from the site. rating
类是网站的原始代码。
The bcrating
is the class below in the CSS code. bcrating
是CSS代码中的下面的类。
The mustache {{rating}}
is the trigger code. 小胡子{{rating}}
是触发器代码。
<p id="hiddenrating" hidden>{{rating}}</p>{{#recommendations}}
<ul class="box-content box-related" id="viewed-product-list">
<li class="item" style="width:16.57%">
<div class="item-info grid_2 alpha"> {{#image}}
<a class="product-image" href="{{URL}}" title="{{name}}">
<img src="{{image}}" alt="{{name}}" style="width:50%">
</a> {{/image}}
<div class="product-details">
<a href="{{URL}}" title="{{name}}">
<span class="product-name">{{name}}</span>
<div class="price leden">
<span class="old_price">
<strong>{{old_price}}</strong>
</span>
<span class="new_price">
<strong>{{new_price}}</strong>
</span>
</div>
</a>
<div class="product-review-block">
<span class="fivestar">
<span class="rating-box">
<a class="nobr" href="{{URL}}#customer-reviews-tab">
</a>
<span class="rating bcrating{{rating}}"></span>
</span>
</span>
</div>
</div>
</div>
</li>
</ul>{{/recommendations}}
CSS: CSS:
.bcrating0 {
width:0%;
}
.bcrating1 {
width:20%;
}
.bcrating2 {
width:40%;
}
.bcrating3 {
width:60%;
}
.bcrating4 {
width:80%;
}
.bcrating5 {
width:100%;
}
If {{rating}}
passes in a value of "4.5", your class name for that .rating
element in HTML is bcrating4.5
. 如果{{rating}}
传递的值为“4.5”,则HTML中该.rating
元素的类名为bcrating4.5
。 HTML can have periods as part of a valid class name. HTML可以将句点作为有效类名的一部分。
In your CSS you only have classes .bcrating4
and .bcrating5
. 在CSS中,您只有类.bcrating4
和.bcrating5
。 Nothing matches. 什么都不匹配。
You need to define a class .bcrating4\\.5
where the period character is escaped, making it a valid selector in CSS that matches your HTML. 您需要定义一个类.bcrating4\\.5
,其中句点字符被转义,使其成为CSS中与HTML匹配的有效选择器。
This is a handy character escaping tool: https://mothereff.in/css-escapes 这是一个方便的角色转义工具: https : //mothereff.in/css-escapes
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.