Как перемещаться вперед и назад по массиву?

Question

У меня есть массив статей, которые я хочу отобразить. Я хочу, чтобы нажимать на следующую стрелку, чтобы перейти к следующей статье или предыдущей стрелке, чтобы перейти к предыдущей статье. Когда я добираюсь до последнего элемента массива, я хочу скрыть следующую стрелку и наоборот для первого элемента.

$(function() { 

    var i = 0 


    $(multibubbles[i]).appendTo('#page'); 
    $(multibubbles[i]).children('#next-arrow').show(); 

     $(multibubbles[i]).children('#next-arrow').click(function (e) { 
      $(multibubbles[i]).hide(); 
      i++; 
      $(multibubbles[i]).appendTo('#page'); 
      if (i == multibubbles.length - 1) { 
       $(multibubbles[i]).children('#next-arrow').hide(); 
      } 
      else { 
       $(multibubbles[i]).children('#next-arrow').show(); 
      } 
      $(multibubbles[i]).children('#prev-arrow').show(); 
     }) 

     $(multibubbles[i]).children('#prev-arrow').click(function (e) { 
      $(multibubbles[i]).hide(); 
      i-- 
      $(multibubbles[i]).appendTo('#page'); 
      if (i == 0) { 
       $(multibubbles[i]).children('#prev-arrow').hide(); 
      } 
      else { 
       $(multibubbles[i]).children('#prev-arrow').show(); 
      } 
      $(multibubbles[i]).children('#next-arrow').show(); 
     }) 
}) 

Когда я нажмите на стрелку в первый раз, когда он идет к следующей статье штрафа, но если я нажимаю снова он ничего не делает, потому что я не могу получить его, чтобы выйти из первой функции мыши. Я попытался использовать 'return', но это тоже не сработало. Пожалуйста, помогите мне.

Answer 1

Я предполагаю, что у вас есть только один элемент «следующая страница» и один элемент «предыдущая страница». В этом случае нет необходимости использовать для этого массив «multibubbles». Я предполагаю, что «multibubbles» может быть настроен как массив строковых значений. Так как элементы «следующей стрелки», вероятно, начинаются видимыми, нет необходимости использовать «show()». Если вы хотите сделать его невидимым, просто измените отображение css для идентификатора «Следующая стрелка». Кроме того, сначала установите '# prev-arrow' в css.

$(document).ready(function() { 
    multibubbles[1] = 'blah blah'; 
    multibubbles[2] = 'blah blah'; 
    ... 

    var numarticles = multibubbles.length; 
    var i=0; 
    $('#next-arrow').click(function() { 
     i++; 
     if (i == (numarticles-1)) { 
      $('multibubbles[i]').show(); 
      $('#next-arrow').hide(); 
      i = numarticles-1; 
     } 
     $('#prev-arrow').show(); 
    }); 

    $('#prev-arrow').click(function() { 
     i--; 
     if (i == 0) { 
      $(multibubbles[i]).show(); 
      $(#prev-arrow).hide(); 
      i=0; 
     } 
     $('#next-arrow').show(); 
    }); 
});