使用jQuery的checkboxlist中的星星

我正在使用一個jQuery插件，通過操作div的css將2.0 3.0轉換爲2星圖像或3星圖像。使用jQuery的checkboxlist中的星星

這個jQuery代碼是

<script type="text/javascript"> 
     $(function() { 

      $('span.stars').stars();  

     }); 

     $.fn.stars = function() { 
      return $(this).each(function() { 
       $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16)); 
      }); 
     } 
</script>

和CSS這是

span.stars, span.stars span 
{ 
    display: block; 
    background: url(../../Images/star.png) 0 -16px repeat-x; 
    width: 80px; 
    height: 16px; 
} 
span.stars span 
{ 
    background-position: 0 0; 
}

但現在我想在複選框列表適用這一點，但我沒有得到這樣做的正確方法。

我的CheckBoxList情況如下：

<asp:CheckBoxList ID="chbStars" runat="server" AutoPostBack="true" OnSelectedIndexChanged="chbStars_SelectedIndexChanged"> 
           <asp:ListItem Text="1" Value="1.0"> </asp:ListItem> 
           <asp:ListItem Text="2" Value="2.0"> </asp:ListItem> 
           <asp:ListItem Text="3" Value="3.0"> </asp:ListItem> 
           <asp:ListItem Text="4" Value="4.0"> </asp:ListItem> 
           <asp:ListItem Text="5" Value="5.0"> </asp:ListItem> 
          </asp:CheckBoxList>

我想這通過操縱CSS這樣

#ctl00_ContentPlaceHolder1_chbStars label 
{ 

    background: url(../../Images/star.png) 0 -16px repeat-x; 
    width: 80px; 
    height: 16px; 
} 

#ctl00_ContentPlaceHolder1_chbStars span 
{ 
    background-position: 0 0; 
}

但我沒有得到改變jQuery的正確方法是什麼？

任何方向都會對我很有幫助。

對於跨度呈現的HTML是

<span style="width: 32px;"></span>

而對於CheckBoxList的渲染HTML是

<table border="0" id="ctl00_ContentPlaceHolder1_chbStars"> 
    <tbody><tr> 
     <td><input type="checkbox" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$chbStars$0\',\'\')', 0)" name="ctl00$ContentPlaceHolder1$chbStars$0" id="ctl00_ContentPlaceHolder1_chbStars_0"><label for="ctl00_ContentPlaceHolder1_chbStars_0">1</label></td> 
    </tr><tr> 
     <td><input type="checkbox" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$chbStars$1\',\'\')', 0)" name="ctl00$ContentPlaceHolder1$chbStars$1" id="ctl00_ContentPlaceHolder1_chbStars_1"><label for="ctl00_ContentPlaceHolder1_chbStars_1">2</label></td> 
    </tr><tr> 
     <td><input type="checkbox" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$chbStars$2\',\'\')', 0)" name="ctl00$ContentPlaceHolder1$chbStars$2" id="ctl00_ContentPlaceHolder1_chbStars_2"><label for="ctl00_ContentPlaceHolder1_chbStars_2">3</label></td> 
    </tr><tr> 
     <td><input type="checkbox" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$chbStars$3\',\'\')', 0)" name="ctl00$ContentPlaceHolder1$chbStars$3" id="ctl00_ContentPlaceHolder1_chbStars_3"><label for="ctl00_ContentPlaceHolder1_chbStars_3">4</label></td> 
    </tr><tr> 
     <td><input type="checkbox" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$chbStars$4\',\'\')', 0)" name="ctl00$ContentPlaceHolder1$chbStars$4" id="ctl00_ContentPlaceHolder1_chbStars_4"><label for="ctl00_ContentPlaceHolder1_chbStars_4">5</label></td> 
    </tr> 
</tbody></table>

來源

2012-04-21 rahularyansharma

生成的HTML代碼將是有益的.. – 2012-04-21 13:26:26

@remy跨度或哪一個複選框列表 – rahularyansharma 2012-04-21 13:43:31

爲複選框列表，或甚至兩者;） – 2012-04-21 13:44:51

你必須jQuery選擇更改爲類似$('#ctl00_ContentPlaceHolder1_chbStars label').stars();
你必須調整.css，＃ctl00_ContentPlaceHolder1_chbStar S標籤跨越

我希望這將顯示你的東西，通過複選框選擇需要被編碼..

來源

2012-04-21 14:14:33

使用jQuery的checkboxlist中的星星

回答

相關問題