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
Post a Comment