0

jQuery を使用して adivの要素のスタイル値を変更しようとしています。style主に、スプライトである背景画像の位置を変更したいだけです。以下は私のメイン コードです。jsFiddle でも表示できます: http://jsfiddle.net/PvTe3/2/

$("#SelectAllBtn").on('click', function ()
{
    $("#departmentList input[type=checkbox]").each(function()
    {

        alert("moo");

        $(this).parent().css('background-image', 'http://localhost:9060/content/img/checkbox_png.png');
        $(this).parent().css('width', '19px');
        $(this).parent().css('height', '19px');
        $(this).parent().css('cursor', 'pointer');
        $(this).parent().css('0px', '0px');

    })
});

変更しようとしているマークアップは次のとおりです。

<input type="button" id="SelectAllBtn" value="vælg alle" />

<div id="departmentList" class="bgWhite withBorder" style="overflow-y: scroll">
        <div>
        <table class="department_table" cellspacing="0" id="ContentPlaceHolder1_BaaMainContent_dl_gv" style="border-width:0px;border-style:None;width:100%;border-collapse:collapse;">
            <tbody><tr>
                <th scope="col"><a href="javascript:__doPostBack('ctl00$ctl00$ContentPlaceHolder1$BaaMainContent$dl$gv','Sort$Name')">Department</a></th><th scope="col">Included</th>
            </tr><tr class="table_row_custom">
                <td>Hybenparken</td><td align="center" style="width:40px;">
                <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="13" checked="checked" style="display: none;"/></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Granparken</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="14" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Blommehaven</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="17" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Bodsbjergvænget 1</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="18" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Hybenparken Tagboliger</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="19" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Lundetoften</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="27" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Lunden</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="35" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Bodsbjergvænget 3</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="36" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Bodsbjergvænget 4</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="37" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Kastanielunden</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="38" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Skelbækparken</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="43" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Hybenvang</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="50" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Vestergade 4-22</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="52" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Vestergade 24-32</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="53" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Vestergade 7-25</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="54" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Nygade 10-13,Østerg.33-39,38-44</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="55" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Østparken 2-8</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="56" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Østergade 71-113</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="57" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Søndermarken</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="58" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Dalvænget</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="59" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Herluf Trollesvej</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="60" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Nørreled 9-29</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="116" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Mosevang 33-35</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="117" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Bent Grubbesvej, Marievej</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="118" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Østerled 27-33</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="119" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Jørgen Rudsvej</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="120" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Svinget 2-12 - Isefjordsvej 11-16</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="121" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Riffelhavevej 19-35</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="122" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Marievej, Østerled</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="123" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Borgmestergårdsvej 2-16</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="124" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Anders Larsensvej-Kappellanvej-Sejerøvej</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="125" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Karensmindevej</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="126" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Anders Larsensvej 40-46</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="127" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Bjergmarken</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="128" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Kasernen</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="129" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Stillidsvej</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="130" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Skibby</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="131" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Kløvermarksvej 19-21</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="132" checked="checked" style="display: none;"></div>
                    </td>
            </tr><tr class="table_row_custom">
                <td>Kastaniegården</td><td align="center" style="width:40px;">
                        <div class="cbInclude styledCheckbox" style="background-image: url(http://localhost:9060/content/img/checkbox_png.png); width: 19px; height: 19px; cursor: pointer; background-position: 0px -19px;"><input type="checkbox" class="cbInclude" data-recid="133" checked="checked" style="display: none;"></div>
                    </td>
            </tr>
        </tbody></table>
    </div>
    </div>

私は何を間違っていますか？

4

1 に答える 1

2

これは機能しますが、これらの入力には既にその画像が背景として含まれています。(http://localhost:9060私にとっては実際には機能していないため、jsfiddle では使用しないでください) JS に行がありましたが、あまり機能していません
。$(this).parent().css('0px', '0px');

$("#SelectAllBtn").on('click', function () {
    $("#departmentList input[type=checkbox]").parent().css({
        background: 'red',
        width: '19px',
        height: '19px',
        cursor: 'pointer'
    });
});
于 2013-06-06T13:51:25.727 に答える