Question

我有一个日期和时间表，我希望用户将鼠标悬停在一个时间段上，然后获取jquery以突出显示那个悬停的td，但突出显示当前突出显示后的列中的第二个td ... 表格的片段

<table>
    <tr>
        <th>Thursday 5</th>
        <th>Friday 6</th>
    </tr>
    <tr>
        <td time="900" date="2015-02-05" class="free"> 900 </td>
        <td time="900" date="2015-02-06" class="free"> 900 </td>
    </tr>
    <tr>
        <td time="930" date="2015-02-05" class="free">930</td>
        <td time="930" date="2015-02-06" class="free"> 930 </td>
    </tr>
    <tr>
        <td time="1000" date="2015-02-05" class="free"> 1000 </td>
        <td time="1000" date="2015-02-06" class="free"> 1000 </td>
    </tr>
</table>

如果有人在2015-02-06徘徊超过900，它还会在2015-02-06上突出显示1000。

这是我的javascript突出了一整天，我一直在尝试使用：eq（2）和：nth-of-type（2）但无济于事。也使用$ this.eq（2）但也没有运气。

当前Javascript

$('input:radio').click(function(){
    if( $(this).val() === 'Two Appointments'){
        $('td.free').hover(function(){
        $(this).removeClass("oneAppt");
        var dateAttr = $(this).attr("date");
        $("[date="+dateAttr+"]").addClass("twoAppt");
        }, function(){
            var dateAttr = $(this).attr("date");
            $("td [date="+dateAttr+"]").removeClass("twoAppt");
        });
    } else {
        $('td.free').hover(function(){
        var dateAttr = $(this).attr("date");
        $("*[date="+dateAttr+"]").removeClass("twoAppt");
        $( this ).addClass( "oneAppt" );
        }, function(){
            $(this).removeClass("oneAppt");
        });
    }
});

Answer 1

使用data属性，如下所示：

＆＃13;

$(function() {
  $('tr:has(.free):first td').on('mouseenter',function() {
    var that = $(this);
    $(this).parent().next().next().find('td').filter(function() {
      return $(this).data('date') == that.data('date');
    })
    .addClass('highlight');
    that.addClass('highlight');
  })
  .on('mouseleave', function() {
    $('.highlight').removeClass('highlight');
  });
});

＆＃13;

.highlight
{
  background-color: #ffff00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tr>
        <th>Thursday 5</th>
        <th>Friday 6</th>
    </tr>
    <tr>
        <td data-time="900" data-date="2015-02-05" class="free"> 900 </td>
        <td data-time="900" data-date="2015-02-06" class="free"> 900 </td>
    </tr>
    <tr>
        <td data-time="930" data-date="2015-02-05" class="free">930</td>
        <td data-time="930" data-date="2015-02-06" class="free"> 930 </td>
    </tr>
    <tr>
        <td data-time="1000" data-date="2015-02-05" class="free"> 1000 </td>
        <td data-time="1000" data-date="2015-02-06" class="free"> 1000 </td>
    </tr>
</table>

＆＃13;

Answer 2

$(function() {
    $('.free').on('mouseover', function() {
        var idx = $(this).index();
        $(this).addClass('hl');
        $(this).parent().next().next().find('td').eq(idx).addClass('hl');
    });
    $('.free').on('mouseout', function() {
        $('.free').removeClass('hl');
    });
});

http://jsfiddle.net/se51kk2w/

Answer 3

**

$(function() {
    $('.free').on('mouseover', function() {
        var idx = $(this).index();
        $(this).addClass('hl');
        $(this).parent().next().find('td').eq(idx).addClass('hl');
    });
    $('.free').on('mouseout', function() {
        $('.free').removeClass('hl');
    });
});

.hl {
    background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
    <tr>
        <th>Thursday 5</th>
        <th>Friday 6</th>
    </tr>
    <tr>
        <td time="900" date="2015-02-05" class="free"> 900 </td>
        <td time="900" date="2015-02-06" class="free"> 900 </td>
    </tr>
    <tr>
        <td time="930" date="2015-02-05" class="free">930</td>
        <td time="930" date="2015-02-06" class="free"> 930 </td>
    </tr>
    <tr>
        <td time="1000" date="2015-02-05" class="free"> 1000 </td>
        <td time="1000" date="2015-02-06" class="free"> 1000 </td>
    </tr>
</table>

试图选择$（this）JQuery的第3个元素

3 个答案: