如何使用箭头键浏览元素

Question

I have the following list of images:

<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>

Clicking on a <figure> element assigns class 'open' to it.

The behaviour I wish to achieve:

1. Press left-arrow-key: .removeClass('open'); from current figure and .addClass('open'); to previous figure (or the last figure in line when the current figure is the first one).

2. Press right-arrow-key: ( .removeClass('open'); from current figure and .addClass('open'); to next figure (or the first figure in line when the current figure is the last one).

3. When there is no figure element with class '.open' assign this class to the first figure element in line.

I am quite new to jQuery, and believe I have to first make an array of the figure elements. Then detect if an arrow button has been pressed.

What I have tried:

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

I'm having trouble understanding how to make this work, and could not find another Stackoverflow question similar to mine. Any help or pointing in the right direction would be very much appreciated!

Answer 1

For answer purpose I would answer with other HTML code (which does not include images):

The idea is to store what index is currently having your class open , then apply and remove the class from elements that applies your idea

 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

Try like below. Explanation is in comments.

 $('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>