javascript - 导航到下一个 div 不起作用

Question

我尝试了很多方法来导航到下一个 div 元素，我正在使用 Mousetrap 作为关键监听器，并检查是否有选定的项目，然后我试图找到下一个 div，但似乎找不到任何想法？

HTML(这个div项有很多):

<div class="item">
<a href="#">
    <div class="item-flip">
        <div class="item-inner">
            <img src="#">
        </div>
            <div class="item-details">
                <div class="item-details-inner">
                    <div class="down-details">
                    <div class="rating" data-content="9.5">
                    <i class="icon icon-star"></i>9.5
                    </div>
                    <span class="year">2011</span>
                    <span>Go</span>
                </div>
            </div>
        </div>
    </div>
</a>
</div>

Javascript

Mousetrap.bind("right", function() {
    if($('.item-flip selected').length){
        var current = $('.item-flip selected');
        $('.selected').removeClass('selected');
        var el = current.next();
        el.addClass('selected');
    }
    else{
        $('.item-flip').first().addClass('selected')
    }
});

Answer 1

我尝试如何找出解决方案，在下面的代码片段中。

兴趣点是:

• 要选择具有两个类的元素，您需要从 $('.item-flip selected') 进行更改至$('.item-flip.selected')

• 要获取下一个元素，您需要找到最近的 div 父元素，然后搜索 item-flip div。所以从 var el = current.next();您需要更改为:var el = current.closest('.item').next().find('.item-flip');

$(function () {
  Mousetrap.bind("right", function(e) {
    if($('.item-flip.selected').length){
      var current = $('.item-flip.selected');
      $('.selected').removeClass('selected');
      var el = current.closest('.item').next().find('.item-flip');
      el.addClass('selected');
    }
    else{
      $('.item-flip').first().addClass('selected')
    }
  });
});

.selected {
  background-color: red;
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://rawgit.com/ccampbell/mousetrap/master/mousetrap.js"></script>

<div class="item">
    <a href="#">
        <div class="item-flip">
            <div class="item-inner">
                <img src="#">
            </div>
            <div class="item-details">
                <div class="item-details-inner">
                    <div class="down-details">
                        <div class="rating" data-content="9.5">
                            <i class="icon icon-star"></i>9.5
                        </div>
                        <span class="year">2011</span>
                        <span>Go</span>
                    </div>
                </div>
            </div>
        </div>
    </a>
</div>
<div class="item">
    <a href="#">
        <div class="item-flip">
            <div class="item-inner">
                <img src="#">
            </div>
            <div class="item-details">
                <div class="item-details-inner">
                    <div class="down-details">
                        <div class="rating" data-content="9.5">
                            <i class="icon icon-star"></i>9.5
                        </div>
                        <span class="year">2011</span>
                        <span>Go</span>
                    </div>
                </div>
            </div>
        </div>
    </a>
</div>
<div class="item">
    <a href="#">
        <div class="item-flip">
            <div class="item-inner">
                <img src="#">
            </div>
            <div class="item-details">
                <div class="item-details-inner">
                    <div class="down-details">
                        <div class="rating" data-content="9.5">
                            <i class="icon icon-star"></i>9.5
                        </div>
                        <span class="year">2011</span>
                        <span>Go</span>
                    </div>
                </div>
            </div>
        </div>
    </a>
</div>