Question

我无法确定要使用哪个选择器来访问CSS属性。这是我的代码：

我的jquery：

<script type="text/javascript">
    $(document).ready(function () {
        $('#columnDay1').css('cursor', 'pointer');
        $('#columnDay1').mouseover(function () {
            $('td.calendarHeader').css("background-color", "#a43802");
        });
        $('#columnDay1').mouseout(function () {
            $('td.calendarHeader').css("background-color", "#37322e");
        });
    });
</script>

我的HTML：

<div class="contentColumnDay1">
<table cellpadding="0" cellspacing="0" id="columnDay1">
    <tr>
        <td class="calendarHeader">
            <p><span class="dayHeader">Day 1</span><br />August 15, 2011</p>
        </td>
    </tr>
    <asp:Label runat="server" id="labelDay1"></asp:Label>
</table>

我正在尝试访问.calendarHeader CSS属性background-color。我试过了#columnDay1.calendarHeader但它不起作用。我正在敲桌子。

有任何帮助吗？

Answer 1

尝试：

$('#columnDay1 .calendarHeader').css('background-color');

我认为你错过了选择者之间的空间

Answer 2

由于contentColumnDay1是一个类，因此您无法使用#contentColumnDay1（＃代表id），而是使用.contentColumnDay1 td.calendarHeader。

Answer 3

而不是

$('#columnDay1').mouseover(function () {
    $('td.calendarHeader').css("background-color", "#a43802");
});

试

$('#columnDay1').mouseover(function () {
    $('td.calendarHeader', this).css("background-color", "#a43802");
});

td.calendarHeader将引用“calendarHeader”类的每个td。您需要为其指定this或$(this)的上下文，以指定您只想在刚捕获的元素中找到td.calendarHeader。或者，您可以执行$(this).find('td.calendarHeader').css

无法确定在div里面的表内的td使用什么选择器

3 个答案: