Question

我正在编写一个脚本，用于在日历中突出显示多个表中的表格单元格。要突出显示的日期是“可用”类。这是当前的jQuery代码：

$(document).ready(function(){
$("td.available").mouseenter(function() {
    $(this).addClass("highlight");
    $(this).next().addClass("highlight");
});
$("td.available").mouseleave(function() {
    $(this).removeClass("highlight");
    $(this).next().removeClass("highlight");
})
});

但是，突出显示仅适用于包含悬停在其中的元素的表格。我假设.next（）不是在$("td.available")返回的集合上运行，而是在原始DOM上运行。

我应该使用什么功能来正确操作套装？

编辑：我想要发生的是相邻的单元格也要突出显示。例如，这可以扩展，以便突出显示接下来的7个单元格。

如果我将鼠标悬停在包含31的单元格上，则要突出显示的其他单元格将在另一个包含下个月的表格中。我猜我需要使用各种各样的“each”来获得一组td元素。

Answer 1

当调用mouseenter事件中的$（this）时，它意味着鼠标输入的特定TD，而不是文档中的整个td.available集合。

这意味着，$（this）.addClass（...）将类添加到“hovered”td，$（this）.next（）。addClass（...）将类添加到兄弟姐妹“徘徊”的td，即使它不可用。

我不确定您的期望，但如果您希望用户将鼠标悬停在桌面上，然后所有可用的单元格都会“亮起”，那么您可以尝试以下操作：

$(".tableNeedToLightUp").mouseenter(function(){
    $("td.available", this).addClass("highlight"); // This select all available tds in the table, if all table light up, take away "this"
}

mouseout事件与此类似。

Answer 2

您需要使用each()。 next()只会走DOM。

Answer 3

我不确定你要做什么，但next()只会获得下一个元素，而不是元素被触发后的所有元素。您可能希望将nextAll()与选择器“td.available”一起使用。或者，如果要突出显示的元素不仅仅是当前单元格后面的元素，您可能只需要重新选择所有表格单元格。

Answer 4

如果我理解你的意图，这应该可以解决问题：

function highlight_all_available_tds() {
    $("td.available").addClass("highlight");
}

function remove_highlight_from_available_tds() {
    $("td.available").removeClass("highlight");
}

$(document).ready(function () {
    $("td.available").
        mouseenter(highlight_all_available_tds).
        mouseleave(remove_highlight_from_available_tds);
});

Answer 5

jQuery在其最新版本（1.4）中提供了新的下一个功能。我在帖子中提到了函数的简短描述。请查看它并使用JQuery做到最好。这是链接

http://aspnet-ajax-aspnetmvc.blogspot.com/2010/10/jquery-next-fucntion-with.html

Jquery - .next（）与许多父母的孩子

5 个答案: