javascript - (向后/向前)按键时的 DOM 导航

Question

我正在尝试将硬币类移动到按下键时的适当元素。 但是，如果元素的名称相似，我不确定如何正确导航 DOM 树。另外，我根据按下键(e.which)向上/向下移动，但如果硬币在某些地方，我需要旋转回到顶部或底部。

例如，当底部有硬币类时，我按下“向下”键。我需要将硬币移到顶部。在顶部逆向按“向上”会找到最后一部分。其他元素的正常上/下行为。

编辑: 我想出了一个几乎完整的解决方案(如下)，但无法弄清楚为什么它在 keydown 上运行我的函数两次(用日志证明)，它在某些情况下有效，但在其他人中则不然。请注意，我还向适当的 div 添加了 data-number 值。例如。 data-number="1"

$('div[id=menu-item]').mouseover(function (e) {
    $('.coin').removeClass('coin InsideContent active');
    $(e.target).prev().show();
    $(e.target).prev().addClass('active InsideContent coin');
});

$(window).on('keydown', function (e) {
    var key = e.which;
    var direction;
    switch (key) {

        case 40:
            direction = 'down'
            findNextTarget(direction);

        case 38:
            direction = 'up';
            findNextTarget(direction);
    }
});

function findNextTarget(direction) {
    var target;
    var classes = $('.coin').data('number');
    console.log(classes);
    switch (classes) {
        case 1:
            if (direction == 'down') {
                target = $('*[data-number="2"]');
            } else if (direction == 'up') {
                target = $('*[data-number="3"]');
            }
        case 2:
            if (direction == 'down') {
                target = $('*[data-number="3"]');
            } else if (direction == 'up') {
                target = $('*[data-number="1"]');
            }
        case 3:
            if (direction == 'down') {
                target = $('*[data-number="1"]');
            } else if (direction == 'up') {
                target = $('*[data-number="2"]');
            }
    }

    $('.coin').removeClass('coin InsideContent active');
    target.show();
    target.addClass('active InsideContent coin');
};

我尝试了多条路线，但我没有获胜。 我正在考虑一个 switch 语句，然后是一个 if/else 来检查“硬币”类当前是在顶部还是底部并且需要旋转。我只是在为 DOM 导航而苦苦挣扎。

使用无序列表可能有更简单的方法，但我确实需要了解更多有关 DOM 树导航的知识。

我的菜单项:

<div class="row">
    <div class="block">
        <div id="pane">
            <div id="coiner" class="one active InsideContent coin" style=""></div>
            <div id="menu-item" class="InsideContent">New Game
            </div>
        </div>
        <div id="pane">
            <div id="coiner" class="two inactive InsideContent" style="display:none;"></div>
            <div id="menu-item" class="InsideContent">Options
            </div>
        </div>
        <div id="pane">
            <div id="coiner" class="three inactive InsideContent" style="display:none;"></div>
            <div id="menu-item" class="InsideContent">Exit
            </div>
        </div>
    </div>
</div>

我在悬停时移动硬币的 Jquery 代码:

$('div[id=menu-item]').mouseover(function (e) {
    $('.coin').removeClass('coin InsideContent active');
    $(e.target).prev().show();
    $(e.target).prev().addClass('coin InsideContent active');
});

我需要检查的 key (e.which)

down = 40 | up = 38

Answer 1

终于开始工作了。 我在 switch cases 之后丢失了 break 语句，这导致了奇怪的行为。 break 是你的 friend 。

虽然我的解决方案不是真正可扩展的，但它确实解决了眼前的问题。

工作代码:

$('div[id=menu-item]').mouseover(function (e) {
    $('.coin').removeClass('coin InsideContent active');
    $(e.target).prev().show();
    $(e.target).prev().addClass('active InsideContent coin');
});

$(window).on('keydown', function (e) {
    var key = e.which;
    switch (key) {
        case 40:
            findNextTarget('down');
            break;
        case 38:
            findNextTarget('up');
            break;
    }
});

function findNextTarget(direction) {
    var target;
    var dataNumber = $('.coin').data('number');
    switch (dataNumber) {
        case 1:
            if (direction == 'down') {
                target = $('*[data-number="2"]');
            } else if (direction == 'up') {
                target = $('*[data-number="3"]');
            }
            break;
        case 2:
            if (direction == 'down') {
                target = $('*[data-number="3"]');
            } else if (direction == 'up') {
                target = $('*[data-number="1"]');
            }
            break;
        case 3:
            if (direction == 'down') {
                target = $('*[data-number="1"]');
            } else if (direction == 'up') {
                target = $('*[data-number="2"]');
            }
            break;
    }
    $('.coin').removeClass('coin InsideContent active');
    target.show();
    target.addClass('active InsideContent coin');
};