如何使用箭头键浏览元素

Question

我有以下图像列表：

<figure>
  <span>
    <img src="images/img_01.jpg">
  </span>
</figure>

<figure>
  <span>
    <img src="images/img_02.jpg">
  </span>
</figure>

<figure>
  <span>
    <img src="images/img_03.jpg">
  </span>
</figure>

单击<figure>元素会将 class 'open' 分配给它。

我希望实现的行为：

1. 按左箭头键： .removeClass('open'); 从当前图和.addClass('open'); 到前一个图（或当当前图是第一个时，行中的最后一个图）。

2. 按右箭头键：( .removeClass('open');从当前图和.addClass('open');到下一个图（或当前图为最后一个时的第一个图）。

3. 当没有 class '.open' 的图形元素时，将此 class 分配给行中的第一个图形元素。

我对 jQuery 很陌生，相信我必须首先制作一个图形元素数组。 然后检测是否按下了箭头按钮。

我试过的：

$currentImage = $('.open');

$('body').on("keyup", function(e) {              
    var code = e.which;

    if (code == 37) { e.preventDefault();
      $currentImage = $currentImage.prev();
    }

    else if (code == 39) {
        e.preventDefault();
      $currentImage = $currentImage.next();
    };
});

我无法理解如何进行这项工作，并且找不到与我类似的另一个 Stackoverflow 问题。 任何帮助或指出正确的方向将不胜感激！

Answer 1

出于回答目的，我将使用其他 HTML 代码（不包括图像）来回答：

想法是存储当前open class 的索引，然后从应用您的想法的元素中应用并删除 class

 let selectedIndex = -1; const $elements = $('span').toArray(); $('body').on("keyup", function(e) { var code = e.which; if (code == 37) { e.preventDefault(); if (selectedIndex === -1) { selectedIndex = 0; } else if (selectedIndex === 0) { $($elements[selectedIndex]).removeClass('open'); selectedIndex = $elements.length - 1; } else { $($elements[selectedIndex]).removeClass('open'); --selectedIndex; } $($elements[selectedIndex]).addClass('open'); } else if (code == 39) { e.preventDefault(); if (selectedIndex === -1) { selectedIndex = 0; } else if (selectedIndex === $elements.length - 1) { $($elements[selectedIndex]).removeClass('open'); selectedIndex = 0; } else { $($elements[selectedIndex]).removeClass('open'); ++selectedIndex; } $($elements[selectedIndex]).addClass('open'); }; });

 .open { border: 2px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span>blabla1</span> <span>blabla2</span> <span>blabla3</span>

Answer 2

尝试如下。 解释在评论中。

 $('body').on("keyup", function(e) { var code = e.which; // get current.open element var $currentImage = $('.open'); // if any of the figure is having class open then only proceed if ($currentImage.length > 0) { if (code == 37) { // left arrow e.preventDefault(); // get previous figure element var prev = $currentImage.prev('figure'); // if length is 0 then it means current one is first. So select last sibling if (prev.length == 0) { prev = $($currentImage).siblings("figure:last") } // remove all open class $('.open').removeClass('open'); // add open class to prev element $(prev).addClass('open'); } else if (code == 39) { // right arrow e.preventDefault(); // get next figure element var next = $currentImage.next('figure'); // if length is 0 then it means current one is last. So select first sibling if (next.length == 0) { next = $($currentImage).siblings("figure:first") } // remove all open class $('.open').removeClass('open'); // add open class to next element $(next).addClass('open'); }; } }); $('figure').on('click', function(e) { e.preventDefault(); $('.open').removeClass('open'); $(this).addClass('open'); });

 figure.open { border: 1px solid blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <figure> <span> <img src="images/img_01.jpg"> </span> </figure> <figure class='open'> <span> <img src="images/img_02.jpg"> </span> </figure> <figure> <span> <img src="images/img_03.jpg"> </span> </figure>