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

How do I change the class of several tds when hovering over one of them?

本文关键字：td 上时 何更改 的类 悬停 鼠标 在其中 一个      更新时间：2023-09-26

这是我的问题。我在表格中有一个月视图类型的日历。在此日历中，可以有某些时期（它们具有"阻止"类）。此类期间的第一个日期具有类"阻止"和"开始"，而最后一个日期具有类"阻止"和"结束"。

现在，当我将鼠标悬停在其中一个 TD 上时，我希望该 td 以及仅在该特定时间段（可以超过多行）中的所有其他 TD 获得类"阻止突出显示"。

这是一个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

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

.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/

您需要使用.siblings()和.addBack()来定位同级阻塞和悬停的元素：

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

工作演示

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

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

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')
      }
    );
 });
相关文章：