Перемещение массива функций с помощью jQuery

Question

Я пытаюсь «правильно перемещаться» внутри массива функций с помощью кнопок «foward» и «back» с jQuery. У меня возникают проблемы с кнопкой «Назад», которая неправильно перемещается.

var functions = [ function0, function1, function2, function3, function4, function5 ]; 
var index = 0; 

$("#forward").click(function() { 
    functions[Math.abs(index % functions.length)](); 
    index++; 
}); 

$("#back").click(function() { 
    functions[Math.abs(index % functions.length)](); 
    index--; 
}); 

Вот полный код:

https://jsfiddle.net/sa13yrtf/2/

Answer 1

вы должны изменить свой индекс в правильном порядке.

$("#forward").click(function(){ 
     if(index < functions.length){ 
     index++; 
     functions[Math.abs(index % functions.length)](); 
     } 
    }); 

$("#back").click(function(){ 
    if(index > 1){ 
     index--; 
     functions[Math.abs(index % functions.length)](); 
    } 
}); 

Answer 2

Проверьте обновленный fiddle

$("#forward").click(function(){ 
    index = index == functions.length - 1 ? 0: index + 1; //number incremented before calling the function and in incremental fashion 
    functions[Math.abs(index % functions.length)](); 
}); 

$("#back").click(function(){ 
    index = index ? index - 1 : functions.length-1 ; //number decremented before calling the function and in incremental fashion 
    functions[Math.abs(index % functions.length)](); 
}); 

Answer 3

Вот объектно-ориентированный подход. Класс Navigator отслеживает индекс для вас.

function Navigator(fnArr, fwdSelector, bakSelector) { 
 
    this.fnArr = fnArr || []; 
 
    this.index = 0; 
 
    $(fwdSelector).click($.proxy(this.forward, this)); 
 
    $(bakSelector).click($.proxy(this.reverse, this)); 
 
} 
 
Navigator.prototype = { 
 
    rotate : function(direction) { 
 
    this.executeFn(Math.abs((this.index += direction) % this.fnArr.length)); 
 
    }, 
 
    forward : function() { 
 
    if (this.index < this.fnArr.length - 1) { this.rotate(+1); } 
 
    }, 
 
    reverse : function() { 
 
    if (this.index > 0) { this.rotate(-1); } 
 
    }, 
 
    executeFn : function(index) { 
 
    this.fnArr[index || 0](); 
 
    } 
 
}; 
 

 
var fnArr = [ 
 
    function function0() { $('p').text('0'); }, 
 
    function function1() { $('p').text('1'); }, 
 
    function function2() { $('p').text('2'); }, 
 
    function function3() { $('p').text('3'); }, 
 
    function function4() { $('p').text('4'); }, 
 
    function function5() { $('p').text('5'); } 
 
]; 
 
var nav = new Navigator(fnArr, '#forward', '#back'); 
 
nav.executeFn();

.pure-button-primary { font-weight: bold; } 
 
p { width: 2.8em; text-align: center; font-weight: bold; font-size: 2em; margin: 0.25em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/buttons-min.css" rel="stylesheet"/> 
 

 
<div class="pure-button pure-button-primary" id="back">&#60;&#60;</div> 
 
<div class="pure-button pure-button-primary" id="forward">&#62;&#62;</div> 
 
<p></p>