根據與其他元素懸停的ID切換類

因此，我有一張建築物的svg平面圖的表格，我希望在用戶將一個表格行懸停在相應的樓層（多邊形）我的svg圖通過css高亮顯示，並切換了課程。我能夠獲得每個元素的ID。我無法通過平面圖svg切換課程。預先感謝您的幫助。根據與其他元素懸停的ID切換類

每個對應元素的匹配元素是一個整數。

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

});

來源

2015-06-19 PK_info

閱讀問題10分鐘。不明白！ –

使用結束與屬性選擇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與_X結束將被換掉

，但我不知道你的邏輯。 js-floor_active .js-floor_inactive你是什麼意思？

來源

2015-06-19 16:15:48

感謝您的幫助，這真的幫了我。 –

未經測試我想說的線

if(row_id == figure_id) { 
     figure_row.toggleClass('.js-floor_active .js-floor_inactive') 
    }

需求是在每個循環，你需要figure_row更改爲this。是這樣的：

$('.js-floor_inactive').each(function() { 
    var figure_id = $(this).attr('id').split('_'); 
    var figure_id = figure_id[1]; 

    if(row_id == figure_id) { 
     $(this).toggleClass('.js-floor_active .js-floor_inactive') 
    } 

});

其餘的代碼邏輯看起來像它應該工作。

來源

2015-06-19 15:57:00 cari

只需在每個循環中放置IF語句，但只會突出顯示輸入的樓層。

var FLOOR_NUMBER_SELECTOR = ".js-floor_number", 
     ACTIVE_FLOOR_SELECTOR = ".js-floor_active", 
     INACTIVE_FLOOR_SELECTOR = ".js-floor_inactive", 
     allTableRows    = $(FLOOR_NUMBER_SELECTOR), 
     allFigureRows   = $(INACTIVE_FLOOR_SELECTOR); 

    allTableRows.mouseenter(onRowEnter); 

    function onRowEnter() 
    { 
     toggleHighlightFloorByRow(this); 
    } 

    function toggleHighlightByRow(row) 
    { 
     var rowID = $(row).attr('id').split('_')[1]; 
     toggleHighlightFloor(rowID); 
    } 

    function toggleHighlightFloor(id) 
    { 
     getFloor(id).toggleClass(ACTIVE_FLOOR_SELECTOR + " " + INACTIVE_FLOOR_SELECTOR); 
    } 

    // Return as jQuery element. 
    function getFloor(id) 
    { 
     var element; 

     // Consider optimizing with "hashmap" 
     $(INACTIVE_FLOOR_SELECTOR).each(function() { 

      // Get ID of the figure. 
      var floorID = $(this).attr('id').split('_')[1]; 
      if (floorID == id) 
      { 
       element = this; 
       break; 
      } 
     }); 

     return $(element); 
    }

你可能還想要的是停用離開的那個。在這種情況下，您可以添加

allTableROws.mouseleave(onRowLeave); 

function onRowLeave() 
{ 
    toggleHighlightFloorByRow(this); 
}

來源

2015-06-19 15:58:29 EricG

根據與其他元素懸停的ID切換類

回答

相關問題