Saya memiliki daftar gambar berikut:

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

Mengklik elemen <figure> menetapkan kelas 'terbuka' untuk itu.

Perilaku yang ingin saya capai:

  1. Tekan tombol panah kiri: .removeClass('open'); dari angka saat ini dan .addClass('open'); ke gambar sebelumnya (atau angka terakhir dalam baris ketika angka saat ini adalah yang pertama).

  2. Tekan kanan-panah-key: (.removeClass('open'); dari gambar saat ini dan .addClass('open'); ke gambar berikutnya (atau angka pertama sejalan ketika angka saat ini adalah yang terakhir).

  3. Ketika tidak ada elemen gambar dengan kelas '.open' Tetapkan kelas ini ke elemen gambar pertama dalam baris.

Saya cukup baru untuk jQuery, dan percaya saya harus terlebih dahulu membuat berbagai elemen gambar. Kemudian deteksi apakah tombol panah telah ditekan.

Apa yang saya coba:

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

Saya mengalami kesulitan memahami cara membuat pekerjaan ini, dan tidak dapat menemukan pertanyaan stackoverflow lain yang mirip dengan saya. Bantuan atau penunjuk arah yang benar akan sangat dihargai!

1
Jordy 5 April 2021, 07:13

1 menjawab

Untuk tujuan jawaban saya akan menjawab dengan kode HTML lainnya (yang tidak termasuk gambar):

Idenya adalah untuk menyimpan indeks apa yang saat ini memiliki kelas open, Kemudian terapkan dan lepaskan kelas dari elemen yang menerapkan ide Anda

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>
0
Tal Rofe 5 April 2021, 06:23