Question

我尝试了许多thigs导航到下一个div元素我正在使用Mousetrap作为键监听器并检查是否有所选项目然后我试图找到下一个div但似乎找不到任何想法？< / p>

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>

导航到下一个不工作的div

1 个答案: