Question

这是我的问题。我在表格中有一个月视图类型日历。在这个日历中，可能存在某些时期（他们的课程被阻止了＃39;）。这段时间的第一个日期是“被阻止的”课程。以及＆＃39; start＆＃39;，而最后一个日期的课程被阻止＆＃39;并且＆＃39;结束＆＃39;。

现在，当我将鼠标悬停在其中一个TD上时，我想要那个td，以及所有其他只在特定时期内（可以超过多行），以获得课程＆＃39;阻止 - 突出显示＆＃39;。

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

以下是小提琴的代码：

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

如果您有多个句点/块并且它们是动态生成的。给他们一个共享的属性或类。然后你可以做类似的事情：

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/

Answer 2

您需要使用.siblings()和.addBack()来定位兄弟阻止和悬停的元素：

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

<强> Working Demo

Answer 3

这是你期待的吗？ http://jsfiddle.net/aoxmpouw/1/

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

Answer 4

i hope this will help you 

just replace your js like this

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

      }
    );
 });

当将鼠标悬停在其中一个上时，如何更改几个tds的类？

4 个答案: