如何使用箭頭鍵瀏覽元素

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>