我正在为FullCalendar版本3创建一些特殊的悬停效果。它现在生成的方式有一天分成单独的表格，这使用CSS添加悬停效果有点挑战。我有大部分工作，但最后一点点，我不知道如何得到我需要的东西。
以下是一周的一些示例代码：
这是第一个表格，即单元格的背景。
<div class="fc-bg">
<table class="">
<tbody>
<tr>
<td class="fc-day fc-widget-content fc-sun fc-past" data-date="2018-04-01"></td>
<td class="fc-day fc-widget-content fc-mon fc-past" data-date="2018-04-02"></td>
<td class="fc-day fc-widget-content fc-tue fc-past" data-date="2018-04-03"></td>
<td class="fc-day fc-widget-content fc-wed fc-past" data-date="2018-04-04"></td>
<td class="fc-day fc-widget-content fc-thu fc-past" data-date="2018-04-05"></td>
<td class="fc-day fc-widget-content fc-fri fc-past" data-date="2018-04-06"></td>
<td class="fc-day fc-widget-content fc-sat fc-past" data-date="2018-04-07"></td>
</tr>
</tbody>
</table>
这是第二个表格，thead中的单元格顶部以及tbody中列出的事件：
<div class="fc-content-skeleton">
<table>
<thead>
<tr>
<td class="fc-day-top fc-sun fc-past" data-date="2018-04-01">
<a class="fc-day-number" data-goto="{"date":"2018-04-01","type":"day"}">1</a>
</td>
<td class="fc-day-top fc-mon fc-past" data-date="2018-04-02">
<a class="fc-day-number" data-goto="{"date":"2018-04-02","type":"day"}">2</a>
</td>
<td class="fc-day-top fc-tue fc-past" data-date="2018-04-03">
<a class="fc-day-number" data-goto="{"date":"2018-04-03","type":"day"}">3</a>
</td>
<td class="fc-day-top fc-wed fc-past" data-date="2018-04-04">
<a class="fc-day-number" data-goto="{"date":"2018-04-04","type":"day"}">4</a>
</td>
<td class="fc-day-top fc-thu fc-past" data-date="2018-04-05">
<a class="fc-day-number" data-goto="{"date":"2018-04-05","type":"day"}">5</a>
</td>
<td class="fc-day-top fc-fri fc-past" data-date="2018-04-06">
<a class="fc-day-number" data-goto="{"date":"2018-04-06","type":"day"}">6</a>
</td>
<td class="fc-day-top fc-sat fc-past" data-date="2018-04-07">
<a class="fc-day-number" data-goto="{"date":"2018-04-07","type":"day"}">7</a>
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="fc-event-container">
<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end">
<div class="fc-content">
<span class="fc-title">All Day Event</span>
</div></a>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="fc-event-container">
<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-not-end">
<div class="fc-content">
<span class="fc-title">Long Event</span>
</div></a>
</td>
</tr>
</tbody>
</table>
</div>
好的，所以我创建了一些jQuery来在fc-day或fc-day-top类悬停时添加悬停效果。它看起来像这样：
$('.fc-day, .fc-day-top').hover(function() {
var myEm = $(this).attr('data-date');
$('.fc-day-top[data-date = '+myEm+'] .fc-day-number').addClass('on-hover');
}, function() {
var myEm = $(this).attr('data-date');
$('.fc-day-top[data-date = '+myEm+'] .fc-day-number').removeClass('on-hover');
});
现在我需要的最后一部分是能够索引正在悬停的单元格，并将类应用于第二个表的tbody部分中的同一列td。基本上，由于每天输出的方式，我将悬停效果应用3次。
所以当我将<td>悬停在第二个表体的第一列时，如何对其进行索引以便我可以为相应的列应用必要的css？
答案 0 :(得分：1)
根据索引突出显示每个表的标题的示例。
$('.fc-day, .fc-day-top').hover(function() {
let myEm = $(this).attr('data-date');
let myIndex = $(this).index();
let targets = $('.fc-day');
let targets1 = $('.fc-day-top');
targets.add(targets1).removeClass('show-me');
// console.log(myIndex);
$('.fc-day').text(myIndex);
targets.eq(myIndex).addClass('show-me');
targets1.eq(myIndex).addClass('show-me');
$('.fc-day-top[data-date = ' + myEm + '] .fc-day-number').addClass('on-hover');
}, function() {
let myEm = $(this).attr('data-date');
let myIndex = $(this).index();
let targets = $('.fc-day');
let targets1 = $('.fc-day-top');
targets.add(targets1).removeClass('show-me');
targets.eq(myIndex).addClass('show-me');
targets1.eq(myIndex).addClass('show-me');
$('.fc-day').text(myIndex);
$('.fc-day-top[data-date = ' + myEm + '] .fc-day-number').removeClass('on-hover');
});table.secondtable>tbody>tr>td,
.fc-day-top,
.fc-day {
border: solid lime 1px;
width: 2em;
height: 2em;
}
.show-me {
border: solid green 1px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="">
<tbody>
<tr>
<td class="fc-day fc-widget-content fc-sun fc-past" data-date="2018-04-01"></td>
<td class="fc-day fc-widget-content fc-mon fc-past" data-date="2018-04-02"></td>
<td class="fc-day fc-widget-content fc-tue fc-past" data-date="2018-04-03"></td>
<td class="fc-day fc-widget-content fc-wed fc-past" data-date="2018-04-04"></td>
<td class="fc-day fc-widget-content fc-thu fc-past" data-date="2018-04-05"></td>
<td class="fc-day fc-widget-content fc-fri fc-past" data-date="2018-04-06"></td>
<td class="fc-day fc-widget-content fc-sat fc-past" data-date="2018-04-07"></td>
</tr>
</tbody>
</table>
<div class="fc-content-skeleton">
<table class="secondtable">
<thead>
<tr>
<td class="fc-day-top fc-sun fc-past" data-date="2018-04-01">
<a class="fc-day-number" data-goto="{"date":"2018-04-01","type":"day"}">1</a>
</td>
<td class="fc-day-top fc-mon fc-past" data-date="2018-04-02">
<a class="fc-day-number" data-goto="{"date":"2018-04-02","type":"day"}">2</a>
</td>
<td class="fc-day-top fc-tue fc-past" data-date="2018-04-03">
<a class="fc-day-number" data-goto="{"date":"2018-04-03","type":"day"}">3</a>
</td>
<td class="fc-day-top fc-wed fc-past" data-date="2018-04-04">
<a class="fc-day-number" data-goto="{"date":"2018-04-04","type":"day"}">4</a>
</td>
<td class="fc-day-top fc-thu fc-past" data-date="2018-04-05">
<a class="fc-day-number" data-goto="{"date":"2018-04-05","type":"day"}">5</a>
</td>
<td class="fc-day-top fc-fri fc-past" data-date="2018-04-06">
<a class="fc-day-number" data-goto="{"date":"2018-04-06","type":"day"}">6</a>
</td>
<td class="fc-day-top fc-sat fc-past" data-date="2018-04-07">
<a class="fc-day-number" data-goto="{"date":"2018-04-07","type":"day"}">7</a>
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="fc-event-container">
<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end">
<div class="fc-content">
<span class="fc-title">All Day Event</span>
</div>
</a>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="fc-event-container">
<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-not-end">
<div class="fc-content">
<span class="fc-title">Long Event</span>
</div>
</a>
</td>
</tr>
</tbody>
</table>
</div>