将鼠标悬停在多个tds上时，如何更改它们的类别？

Question

here's my problem. I have a month-view type calendar in a table. In this calendar there can be certain periods which are (they have the class 'blocked'). The first date of such a period has the class 'blocked' as well as 'start', while the last date has the classes 'blocked' and 'end'.

Now, when I hover over one of these TDs I want that td, and all the other ones in ONLY THAT SPECIFIC period (can be over multiple rows), to get the class 'blocked-highlight'.

Here is a JSFiddle which generally shows what I have: http://jsfiddle.net/aoxmpouw/

Here is the Code from the Fiddle:

RELEVANT PART OF 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 is perfectly fine, as well as pure CSS solutions, if there are any.

Thanks in advance, Cheers -N

Answer 1

If you have multiple periods / blocks and they are generated dynamically. give them a shared attribute or class. Then you could do something like:

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');            
       }
    );
});

Demo: http://jsfiddle.net/aoxmpouw/5/

Answer 2

you need to use .siblings() along with .addBack() to target sibling blocked and hovered element:

 $("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

Is this wat you are expecting? 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')

      }
    );
 });