arrow clicks in jquery

Question

I have 2 arrows one increments a counter by 1 and the left one decreases it the problem I am trying to solve is good logic to deal with negative number (it should go to the last item in the list) and at the other end when the counter is over the max number of items it should return to 0.

Am looking for some nice logic to achieve this.

"-ve number"? Is that some horrible new way to say "negative"? — ThiefMaster, Apr 18 '12 at 13:15
@RoryMcCrossan: not if you count the time it takes to respond to atrocious abuse of language by text-speak conventions... — David Thomas, Apr 18 '12 at 13:17

Sampson · Answer 1 · 2012-04-18T14:23:05.603

Anytime you increment, check the new value. If it's greater than the total number of options, reset it to zero. If it's less than the total number of options, set it to the max. Else, simply +=1 or -=1.

For example:

var total = 5,
    currentNumber = 0,
    numContainer = $("#number");

$(".up, .down").on("click", function(){
  currentNumber = parseInt( numContainer.text(), 10 );
  if ( $(this).hasClass("up") ) {
   if ( ++currentNumber > total ) currentNumber = 1; 
  }
  if ( $(this).hasClass("down") ) {
   if ( --currentNumber < 1 ) currentNumber = total; 
  }
  numContainer.text( currentNumber );
});

This could be further reduced to use the ternary operator as well as hack the functionality of the short-circuiting conjunction operator:

var t = 5, c = 0, n = $("#number");

$(".up, .down").on("click", function(){
  c = parseInt( n.text(), 10 );
  $(this).hasClass("up") ? (++c > t) && (c = 1) : (--c < 1) && (c = t); 
  n.text( c );
});

Demo: http://jsbin.com/egifas/edit#javascript,live

score 1 · Accepted Answer · answered Apr 18 '12 at 13:16

You can use the modulo operator for this:

(num + total) % total

If you want 1..total instead of 0..total-1, use ((num + total) % total) + 1

So the (pseudo-)code could look like this:

function inc() {
    num = (num + 1 + total) % total;
}

function dec() {
    num = (num - 1 + total) % total;
}

The +total is necessary since the behaviour of the modulo operator for negative values is not consistent across languages and that way it always works since you never get a negative value.

score 0 · Answer 3 · answered Apr 18 '12 at 13:37

Theifmaster was right, was almost there myself

var num = 0;
var total = 5;
if (direction == 'left') {
num = (num - 1 + total) % total;
}

if (direction == 'right') {
num = (num +  1 + total) % total;
alert(num);

}

so if you click on the left arrow in my example it should be -1 but this makes it 4 mod 5 = 4. My logic was too long this is a much neater way to do it.

score 0 · Answer 4 · answered Apr 18 '12 at 13:42

I don't find using % operator as the easiest way. It's only adding complexity where you don't need it at all, imo. However, i'm not telling it's wrong.

So, easy way. All you need is actually total number of slides (or whatever elements/object u have there). Your both methods can look like this:

var counter = 0;
var total = 7; // u will need to set this to your own totalCount value.

function incrementCounter() 
{
  counter = (counter < total - 1) ? counter + 1 : 0;
}


function decrementCounter() 
{
  counter = (counter > 1) ? counter - 1 : total;
}

Please not, that piece of code actually does nothing. It's doesn't even check data for validness (i.e. if global vars are set, if total is actually greater than zero etc). Anyway based on this u can use this counter variable for displaying some content, or moving images or whatever are you doing there. Also, you may want to change it to zero-index based. This will be useful if you are playing with JS arrays there, so you won't need to +/- 1 on indexes for getting elements.

arrow clicks in jquery

4 Answers4