javascript - Toggle Class based on ID on hover with other elements -


so have table svg floor plan building , have when user hovers on 1 of table rows corresponding floor(polygon) in svg diagram highlighted via css toggling of class. able id's each element. having trouble looping through floor plan svg toggle class. in advance help.

the matching element each corresponding element integer.

<table>     <tr id="floor_1" class="js-floor_number">         <td>12</td>     </tr>     <tr id="floor_2" class="js-floor_number">         <td>12</td>     </tr>      <tr id="floor_3" class="js-floor_number">         <td>12</td>     </tr> </table> <svg>     <polygon id="south_1" class="js-floor_inactive"></polygon> </svg> <svg>     <polygon id="south_2" class="js-floor_inactive"></polygon> </svg> <svg>     <polygon id="north_3" class="js-floor_inactive"></polygon> </svg>     

//vars var table_row = $('.js-floor_number'); var figure_row = $('.js-floor_inactive');  table_row.mouseenter(function () {      var row_id = $(this).attr('id').split('_');     var row_id = row_id[1];      $('.js-floor_inactive').each(function () {         var figure_id = $(this).attr('id').split('_');         var figure_id = figure_id[1];           console.log(figure_id);          console.log(row_id);      });      if (row_id == figure_id) {         figure_row.toggleclass('.js-floor_active .js-floor_inactive')     }  }); 

use ends attribute selector https://api.jquery.com/attribute-ends-with-selector/

var table_row = $('.js-floor_number');  table_row.mouseenter(function () {     var row_id = $(this).attr('id').split('_');     var row_id = row_id[1];     $('.js-floor_inactive[id$=_' + row_id +']').toggleclass('.js-floor_active .js-floor_inactive'); }); 

id ends _x replace

but don't know logic .js-floor_active .js-floor_inactive mean this?


Comments

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

Kivy: Swiping (Carousel & ScreenManager) -