动态CSS，元素数可变

Question

So I have some code that produces a table (although not using table tags as that would obviously be wrong!) where each row has a bar that is coloured in depending on a percentage. This is currently done using inline styles as you can see below (using the smarty template system).

I want to move move these styles to the stylesheet but I'm not sure how I can make the classes dynamic as I don't know how many rows there will ever be.

<div class="fullbar">
    <div class="bar">
    {if $responses[all].responses eq 0}
        <div class="innerbar allna" style="width: 100%;">&nbsp;All responses marked as n/a</div>
    {elseif $responses[all].score lt $withholdBelow}
        <div class="innerbar shortbar" style="width: {$withholdBelow * 10}%;">&nbsp;Withheld - Less than {$withholdBelow}</div>
    {else}
        {if $responses[all].responses lt 4}
            <div class="innerbar na" style="width: {$responses[all].score * 10}%;">&nbsp;Two or more responses n/a</div>
        {else}
            <div class="innerbar" style="width: {$responses[all].score * 10}%;"></div>
        {/if}
    {/if}
    </div>
    <div class="scale-container-results">
        <div class="scaleleft-results">Totally Disagree</div>
        <div class="scalecenter-results">Neutral</div>
        <div class="scaleright-results">Totally Agree</div>
    </div>
</div>

Is what I am asking possible and if so how?

Answer 1

I think you're trying to create a progressbar. There's nothing wrong with using classes for the shared properties and inline styling to set the dynamic properties, eg a width: 43%; for the percentage of the progressbar, as you already do.

This is exactly how for example Bootstrap does it, see http://getbootstrap.com/components/#progress

Answer 2

It's ok as it is, and I don't think there's a way to do it with css, except creating a class for each 10% increment (and that's supposing that the scores go from 0 to 10 without decimals in increments of 1) like:

.w_0{width:0;}
.w_1{width:10%;}
.w_2{width:20%;}

and so on and then in your html:

<div class="innerbar na w_{$responses[all].score}"></div>

another option would be using jquery:

<div class="innerbar na" data-width="{$responses[all].score}"></div>

processing the value in data-width with jquery to calculate and change the width of the layer

$('.innerbar').each(function(){
  bar_width=$(this).data('width');
  $(this).width(bar_width*10+'%');});

jsfiddle