Question

我已经写了一些代码来改变基于其中输入元素的属性的背景。但是这不起作用..下面是我的代码

$('TABLE TBODY TR TD input').change(function()
{
    alert("Hi");
    if($(this).prop('checked'))
    {
        alert("Checked");
        $(this).closest('TD').css('background-color','gray');
    }
    else
    {
        alert("Not Checked");
        if($(this).closest('TD').prop('class')=='gridanswer')
        {
            this.closest('TD').css('background-color','transparent');
        }
        if(this.closest('TD').prop('class')=='gridlabelalternating')
        {
            this.closest('TD').css('background-color','transparent');
        }
    }
});

这是我的HTML代码

   <table>
   <tr>
   <th style="width: 100px" class="gridlabel">Row 1</th>
   <td headers="Q1_header1" class="gridanswer"><input tabindex="1" type="checkbox" name="Q1a1Xve0_1" id="Q1a1Xve0_1" value="1"/><div class="xxxx-hidden"><span>Row 1</span><label for="Q1a1Xve0_1">Column 1</label></div></td>
   <td headers="Q1_header2" class="gridanswer"><input tabindex="2" type="checkbox" name="Q1a2_1" id="Q1a2_1" value="1"/><div class="xxxx-hidden"><label for="Q1a2_1">Column 2</label></div></td>
   <td headers="Q1_header3" class="gridanswer"><input tabindex="3" type="checkbox" name="Q1a3_1" id="Q1a3_1" value="1"/><div class="xxxx-hidden"><label for="Q1a3_1">Column 3</label></div></td>
   <td headers="Q1_header4" class="gridanswer"><input tabindex="4" type="checkbox" name="Q1a4_1" id="Q1a4_1" value="1"/><div class="xxxx-hidden"><label for="Q1a4_1">Column 4</label></div></td>
   <td headers="Q1_header5" class="gridanswer"><input tabindex="5" type="checkbox" name="Q1a5_1" id="Q1a5_1" value="1"/><div class="xxxx-hidden"><label for="Q1a5_1">Column 5</label></div></td>
   <td headers="Q1_header6" class="gridanswer"><input tabindex="6" type="checkbox" name="Q1a6_1" id="Q1a6_1" value="1"/><div class="xxxx-hidden"><label for="Q1a6_1">Column 6</label></div></td>
   <td headers="Q1_header7" class="gridanswer"><input tabindex="7" type="checkbox" name="Q1a7_1" id="Q1a7_1" value="1"/><div class="xxxx-hidden"><label for="Q1a7_1">Column 7</label></div></td>
   <td headers="Q1_header8" class="gridanswer"><input tabindex="8" type="checkbox" name="Q1a8_1" id="Q1a8_1" value="1"/><div class="xxxx-hidden"><label for="Q1a8_1">Column 8</label></div></td>
   <td headers="Q1_header9" class="gridanswer"><input tabindex="9" type="checkbox" name="Q1a9Xclusive_1" id="Q1a9Xclusive_1" value="1"/><div class="xxxx-hidden"><label for="Q1a9Xclusive_1">None</label></div></td>
   <td headers="Q1_header10" class="gridanswer"><input tabindex="10" type="checkbox" name="Q1a10Xclusive_1" id="Q1a10Xclusive_1" value="1"/><div class="xxxx-hidden"><label for="Q1a10Xclusive_1">Don't Know</label></div></td>
  </tr>
  </table>

默认情况下点击任何复选框或广播属性正在改变。我想禁用此功能。

Answer 1

this.closest（ 'TD'）。CSS（ '背景色'， '透明'）这应该是$（this）并且请添加你的html以及实际上失败的细节。

Answer 2

$('input.class').change(function() {
    var td = $(this).closest('td');
    if($(this).prop('checked')) {
        td.css('background-color','gray');
    }
    else {
        if(td.prop('class') == 'gridanswer' || td.prop('class') == 'gridlabelalternating') {
            td.css('background-color','transparent');
        }
    }
});

我可能会为它设置一个具有预定义CSS样式的类，而不是通过JQuery设置CSS。希望这会有所帮助。

Wheres是我的代码中的错误

2 个答案: