javascript - 当将鼠标悬停在其中一个 td 上时，如何更改多个 td 的类别？

Question

这是我的问题。我的表格中有一个月 View 类型的日历。在此日历中，可能存在某些时期(它们的类别“被阻止”)。此类时间段的第一个日期具有“阻止”和“开始”类，而最后一个日期具有“阻止”和“结束”类。

现在，当我将鼠标悬停在其中一个 TD 上时，我想要该 TD 以及仅在该特定时间段内的所有其他 TD(可以跨越多行)，以获得类“blocked-highlight”。

这是一个 JSFiddle，它通常显示我所拥有的内容: http://jsfiddle.net/aoxmpouw/

这是 fiddle 中的代码:

HTML 的相关部分:

        ...     
        <td>13</td>
        <td>14</td>
    </tr>
    <tr>
        <td>15</td>
        <td>16</td>
        <td class="blocked start">17</td>
        <td class="blocked">18</td>
        <td class="blocked">19</td>
        <td class="blocked">20</td>
        <td class="blocked">21</td>
    </tr>
    <tr>
        <td class="blocked">22</td>
        <td class="blocked">23</td>
        <td class="blocked end">24</td>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        ...

JS:

$( document ).ready(function() {
    $("td.blocked").hover(
        function() {
            $( this ).addClass('blocked-highlight')
        }, function() {
            $( this ).removeClass('blocked-highlight')
        }
    );
});

CSS:

.blocked {
    color: white;
    background-color: red;
}

.start {
    border-left: 5px solid black;
}

.end {
    border-right: 5px solid black;
}

.blocked-highlight {
    background-color: blue;
}

JQuery 非常好，还有纯 CSS 解决方案(如果有的话)。

提前致谢，干杯-N

Answer 1

如果您有多个周期/ block 并且它们是动态生成的。给他们一个共享的属性或类。 然后你可以这样做:

HTML:

   ...     
    <td>13</td>
    <td>14</td>
</tr>
<tr>
    <td>15</td>
    <td>16</td>
    <td class="blocked start" rel="1">17</td>
    <td class="blocked" rel="1">18</td>
    <td class="blocked" rel="1">19</td>
    <td class="blocked" rel="1">20</td>
    <td class="blocked" rel="1">21</td>
</tr>
<tr>
    <td class="blocked" rel="1">22</td>
    <td class="blocked" rel="1">23</td>
    <td class="blocked end" rel="1">24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    ...

JS:

   $( document ).ready(function() {
      $("td.blocked").hover(
       function() {
        rel = $(this).attr('rel');
        $( "td[rel='"+rel+"']").addClass('blocked-highlight');
       }, function() {
        rel = $(this).attr('rel');
        $( "td[rel='"+rel+"']").removeClass('blocked-highlight');            
       }
    );
});

演示:http://jsfiddle.net/aoxmpouw/5/