如何創建一個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類的多個實例？

回答

相關問題