Question

所以我有一个带有svg楼层平面图的桌子，我希望在用户盘旋在其中一个桌子行上时，我的svg图表中的相应楼层（多边形）通过css突出显示班上的。我能够获得每个元素的id。我无法循环通过平面图svg来切换课程。在此先感谢您的帮助。

每个对应元素的匹配元素是一个整数。

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

});

Answer 1

使用以属性选择器 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');
});

以_X结尾的ID将被替换

但我不知道你的逻辑 .js-floor_active .js-floor_inactive 你的意思是什么？

Answer 2

没有测试我会说行

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

});

其余的代码逻辑看起来应该可以工作。

Answer 3

只需将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);
}

在悬停时使用其他元素切换基于ID的类

3 个答案: