Пред./След. В массиве

Question

У меня есть переменная с пустым массивом.

var imageData = []; 
var myIndex = 0; 

onClick элемента я добавлять элементы в массив.

["item_1", "item_2", "item_3", "item_4", "item_5"] 

Этот массив затем добавляется в div, у которого есть фоновое изображение.

$('.final_div').css('background-image', 'url(https://url/path/images/' + imageData[myIndex] + '.png)'); 

Так что я только что добавил кнопку prev/next. Я добавил: myIndex = myIndex +1; к следующей кнопке, а затем myIndex = myIndex -1; к кнопке prev. Однако после стольких итераций я ничего не возвращаю, поскольку в myIndex есть undefined Кто-нибудь знает, что я делаю неправильно?

Я видел этот вопрос несколько раз, но не уверен, что я пропустил. Благодаря!

EDIT: Извините! Вот более полный обзор кода.

Мой массив: ["item_1", "item_2", "item_3", "item_4", "item_5"]

Мой следующий onClick:

$('.btn-right').on('click', function(){ 
     myIndex = myIndex + 1; 
    $('.final_div').css('background-image', 'url(https://url/path/images/' + imageData[myIndex] + '.png)'); 
    }); 

Моя предыдущая onClick:

$('.btn-left').on('click', function(){ 
     myIndex = myIndex - 1; 
    $('.final_div').css('background-image', 'url(https://url/path/images/' + imageData[myIndex] + '.png)'); 
    }); 

Answer 1

Чистое решение, всегда поддерживающее индекс внутри границ массива, должно по модулю его размера. Как так:

myIndex = (myIndex + 1) % imageData.length; 

Это заставит myIndex оправиться до 0 раз он достиг imageData.length.

Другой подход к тем же способом будет:

myIndex++; 
myIndex %= imageData.length; 

Answer 2

Вы увеличивая myIndex на каждый клик. Он скоро пройдет до конца imageData (например, когда myIndex будет 4 в вашем примере, приращение к 5 будет проходить через конец массива).

Проверьте, и либо вернуться к началу:

$('.btn-right').on('click', function(){ 
    myIndex++; 
    if (myIndex >= imageData.length) 
    myIndex = 0; 

    $('.final_div').css('background-image', 'url(https://url/path/images/' + imageData[myIndex] + '.png)'); 
}); 

Или просто остаться в конце списка:

$('.btn-right').on('click', function(){ 
    myIndex++; 
    if (myIndex >= imageData.length) 
    myIndex = imageData.length - 1; 

    $('.final_div').css('background-image', 'url(https://url/path/images/' + imageData[myIndex] + '.png)'); 
}); 

Логика «левого» будет похож - либо :

if (myIndex < 0) 
    myIndex = imageData.length - 1; 

или

if (myIndex < 0) 
    myIndex = 0;