2017-09-01 1 views
1

J'ai un problème. Je travaille avec du code moustache pour déclencher le contenu. Maintenant, j'ai une note de 5 étoiles dans le site Web, mais pour déclencher le contenu sans entrer dans le code, j'ai fait la superposition avec le code moustache. Tout fonctionne bien. Mais si, par exemple, dans le code source, la note est de 4,5 étoiles, elle ne remplit pas les étoiles. Mais dans le code source, la classe est changée en bcrating4.5.Le classement 5 étoiles "largeur"% de 0 - 100% en CSS ne fonctionne qu'avec les 20/40/60/80/100 mais pas par exemple 70%

Ceci est mon code:

<span class="rating bcrating{{rating}}"></span> 

La classe rating est le code original du site. La classe bcrating est la classe ci-dessous dans le code CSS.
La moustache {{rating}} est le code de déclenchement.

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

.bcrating0 { 
    width:0%; 
} 
.bcrating1 { 
    width:20%; 
} 
.bcrating2 { 
    width:40%; 
} 
.bcrating3 { 
    width:60%; 
} 
.bcrating4 { 
    width:80%; 
} 
.bcrating5 { 
    width:100%; 
} 

Répondre

3

Si {{rating}} passe dans une valeur de "4,5", votre nom de classe pour cet élément .rating en HTML est bcrating4.5. HTML peut avoir des points dans le cadre d'un nom de classe valide. Dans votre CSS, vous n'avez que les classes .bcrating4 et .bcrating5. Rien ne correspond.

Vous devez définir une classe .bcrating4\.5 où le caractère point est échappé, ce qui en fait un sélecteur valide en CSS qui correspond à votre code HTML.

Ceci est un outil d'échappement de caractère pratique: https://mothereff.in/css-escapes