Question

我正在使用jQuery插件，它通过操纵div的css将2.0 3.0转换为2星图像或3星图像。

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>

Answer 1

您必须将jQuery选择器更改为$('#ctl00_ContentPlaceHolder1_chbStars label').stars();
你必须调整.css，＃ctl00_ContentPlaceHolder1_chbStars标签以跨越

我希望这会显示你的东西，通过复选框的选择需要编码..

使用jQuery在checkboxlist中的星星

1 个答案: