Question

我试图将硬币类移动到keydown上的相应元素。但是，如果元素的名称相似，我还不确定如何正确导航DOM树。此外，我根据keydown（e.which）向上/向下移动，但如果硬币在某些地方，我需要旋转回顶部或底部。

比如说我按下＆＃39; down＆＃39;当底部有硬币类。我需要将硬币移到顶部。不正当地按下＆＃39; up＆＃39;在顶部会找到最后一节。其他元素的正常上/下行为。

编辑：我提出了一个几乎完整的解决方案（下图），但无法弄清楚为什么它在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来检查一个＆＃39;硬币＆＃39; class当前位于顶部或底部，需要旋转。我正在努力解决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');
});

我需要检查的密钥（e.which）

down = 40 | up = 38

Answer 1

终于工作了。在我的切换案例之后我丢失了break语句，这导致了奇怪的行为。 break你是朋友。

虽然我的解决方案并非真正可扩展，但它确实解决了当前的问题。

工作代码：

$('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');
};

Answer 2

＆＃13;

$('.menu-item').mouseover(function(e) {
  $('.coiner').removeClass('coin').hide();
  $(this).prev().addClass('coin').show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="pane">
  <div class="coiner" style="">pane 1</div>
  <div class="menu-item InsideContent">New Game
  </div>
</div>
<div class="pane">
  <div class="coiner" style="display:none;">pane 2</div>
  <div class="menu-item InsideContent">Options
  </div>
</div>
<div class="pane">
  <div class="coiner" style="display:none;">pane 3</div>
  <div class="menu-item InsideContent">Exit
  </div>
</div>

＆＃13;

（向后/向前）keydown上的DOM导航

2 个答案: