Question

我正在尝试访问以下td'dayContent'并将背景颜色更改为＃a43802。我尝试了几种方法却没有成功。

这个td存在于tr和table中，它被div，li，ul和另一个div包围。 :(

dayContent的内容是从我的后端代码生成的。目前，如果将鼠标悬停在“列”上，则标题背景会更改颜色，这是正确的行为。

但是，我无法选择“个人”.dayContent项来更改背景颜色，而是更改列中所有.dayContent背景颜色。

所需的效果是列标题的背景颜色发生变化，而当前的.dayContent mousedover也应该更改背景颜色。我尝试访问<p>，但它做了同样的事情，并将背景颜色更改为列中的所有<p>。

Soo ....谁能指出我正确的方向？我的大脑疼。

JQUERY CODE：

        $('#columnDay1').css('cursor', 'pointer');
        $('#columnDay1').mouseover(function () {
            $('td.calendarHeader', this).css("background-color", "#a43802");
        });
        $('#columnDay1').mouseout(function () {
            $('td.calendarHeader', this).css("background-color", "#37322e");
        });
        $('#testSpot').mouseover(function () {
            $('td.dayContent', this).css("background-color", "#a43802");
        });
        $('#testSpot').mouseout(function () {
            $('td.dayContent', this).css("background-color", "White");
        });

HTML代码：

    <tr>
        <td class='dayContentImage' height='174' Width='187' BACKGROUND='/Images/day1_10am.jpg'><p><span class='dayContentImageDay'>10</span>AM</p></td>
    </tr>
    <tr>
        <td class='dayContent'><p id='testSpot'><span class='dayContentDay'>6</span>PM<br />Content</p></td>
    </tr>
    <tr>
        <td class='dayContent'><p id='testSpot'><span class='dayContentDay'>6</span>PM<br />Content</p></td>
    </tr>
    <tr>
        <td class='dayContentImage' height='173' Width='187' BACKGROUND='/Images/day1_7pm.jpg'><p><span class='dayContentImageDay'>7</span>PM</p></td>
    </tr>
    <tr>
        <td class='dayContent'><p id='testSpot'><span class='dayContentDay'>9</span>PM<br />Content</p></td>
    </tr>

感谢。

Answer 1

让我们先介绍一下您的代码所遇到的一些问题。

1）DOM元素必须具有唯一ID。你在这里使用#testSpot几次，这很糟糕，会让你的代码表现得很奇怪。

2）执行此操作时：$('td.dayContent', this).css("background-color", "#a43802");您正在<td>对象的上下文中搜索dayContent类this，！的。此事件中的this是您的#testSpot，其中不包含<td>，其中包含名为dayContent的类。

一个解决方案是（在修复使用重复ID之后 - 只恢复到类而不是基于ID！）在mouseover事件中使用类似的东西： $(this).parent("td.dayContent").css("background-color", "#a43802");。

但是， 这是一个糟糕的解决方法，这个效果可以通过基本的jQuery和CSS类来实现。你能做什么，并且最好的做法就是在鼠标结束时为元素添加一个名为hover的类，当鼠标移出时将其删除，然后只需添加CSS即可更改背景颜色这些要素。你可以这样做：

$("td.dayContent").hover(function(){ $(this).addClass("hover"); }, function(){ $(this).removeClass("hover"); });

然后你可以通过CSS设置它（这是设计的正确位置而不是JS！），如下所示：

td.dayContent { background-color: white; } // default color
td.dayContent.hover { background-color: green; } // color when the td is being hovered.

Answer 2

$('#testSpot').mouseover(function () {
    $(this).parent().css("background-color", "#a43802");
});
$('#testSpot').mouseout(function () {
    $(this).parent().css("background-color", "White");
});

您的#testSpot家长是您尝试访问的td我认为，如果不是直接家长，那么.closest('.dayContent')代替.parent()也应该这样做

Answer 3

id属性指定HTML元素的唯一ID，它在HTML文档中必须是唯一的。 1）所以将testSpot从id更改为class。

2）你正在testSpot元素中搜索td，这是不对的，而是尝试$（this）.parent（'td'）找到testSpot元素的父td。

    $('.testSpot').mouseover(function () {
        $(this).parent('td').css("background-color", "#a43802");
    });
    $('.testSpot').mouseout(function () {
        $(this).parent('td').css("background-color", "White");
    });

在表格中选择一个，li，ul和div来更改背景颜色

JQUERY CODE：

HTML代码：

3 个答案: