0

我正在编写一个脚本来突出显示日历中多个表格中的表格单元格。要突出显示的日期具有“可用”类。这是当前的 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 的单元格上，则要突出显示的其他单元格将位于另一个包含下个月的表中。我猜我需要使用各种“每个”来获得一组 td 元素。

4

5 回答 5

1

当调用 mouseenter 事件中的 $(this) 时，它表示鼠标输入的特定 TD，而不是文档中的全部 td.available。

这意味着， $(this).addClass(...) 将类添加到“悬停” 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 事件也类似。

于 2009-07-03T15:11:52.397 回答
0

你需要使用each(). next()只走 DOM。

于 2009-07-03T15:07:35.623 回答
0

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

于 2009-07-03T15:10:50.950 回答
0

如果我正确理解了您的意图，这应该可以解决问题：

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);
});
于 2009-07-03T15:13:07.903 回答
0

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

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

于 2010-10-29T06:42:23.910 回答