0

のcssを操作して2.0 3.0を2つ星の画像または3つ星の画像に変換する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 を変更する正しい方法が得られませんか?

どんな方向性も私にとって大いに役立ちます。

スパンの場合、レンダリングされた 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 に答える