Navigate an array of functions using jQuery

Question

I am trying to "navigate" correctly inside an array of functions by a "foward" and a "back" buttons with jQuery. I am having trouble with the back button which is navigating incorrectly.

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

Here is the complete code:

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

Özgür Ersil · Accepted Answer · 2016-05-10 10:29:45Z

2

you should change your index in the right order.

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

answered May 10, 2016 at 10:29

Özgür Ersil

7,0133 gold badges21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gurvinder372 · Accepted Answer · 2016-05-10 10:32:37Z

2

Check the updated 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)]();
});

answered May 10, 2016 at 10:32

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Comments

Mr. Polywhirl · Accepted Answer · 2016-05-10 11:34:10Z

Here is an object-oriented approach. The Navigator class keeps track of the index for you.

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>

Collectives™ on Stack Overflow

Navigate an array of functions using jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related