0

我正在使用一个 jQuery 插件，它通过操纵div.

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;
}

但是现在我想在复选框列表中应用它，但我没有得到正确的方法来做到这一点。

我的复选框列表如下：

<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 的正确方法？

任何方向都会对我有很大帮助。

对于 span 呈现的 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>
4

1 回答 1

0

  1. 您必须将 jQuery 选择器更改为类似 $('#ctl00_ContentPlaceHolder1_chbStars label').stars();

  2. 您必须调整 .css、#ctl00_ContentPlaceHolder1_chbStars 标签以跨越

我希望这会向您展示一些东西，需要对通过复选框的选择进行编码..

于 2012-04-21T14:14:33.447 回答