Using a mod to wrap

Question

Suppose the array is 1000 in length. I am trying to create a simple way to cross the image paths stored in the array without going beyond. The method below handles the wrapper using the module well when you need to click the "Next" button to increase the index of the array, but not when I have to reduce and subtract one from the index (when the user clicks the previous button).

I am basically trying to do the following:

998 -> click next -> 999 999 -> click next -> 0 0 -> click previous -> 999 

My javacript

 var index = 0; $('.catalog-img-container').attr("src", javascript_array[index]); $(".next").click(function(){ $('.catalog-img-container').attr("src", javascript_array[++index%arrayLength]); }); $(".previous").click(function(){ $('.catalog-img-container').attr("src", javascript_array[--index]); alert(index); 

I appreciate any help with

Thanks a lot in advance.

Answer 1

There may be a more elegant way, but it's simple:

 $(".previous").click(function(){ if (--index < 0) index = arrayLength - 1; $('.catalog-img-container').attr("src", javascript_array[index%arrayLength]); }); 

Answer 2

Since --index%arrayLength does not work, just add the length of the array before accepting the module:

 index = (index+arrayLength-1) % arrayLength 

You can also do

 (index+=arrayLength-1)%arrayLength 

but this will cause the index become very large, possibly out of range for enough time.

Answer 3

You can also use a convenient object for it.

 var Cursor = function (array) { var idx = 0; this.prev = function () { idx = (!!idx ? idx : array.length) - 1; return array[idx]; }; this.current = function () { return array[idx]; }; this.next = function () { idx = (idx + 1) % array.length; return array[idx]; }; return this; }; 

For example,

 var $container = $(".catalog-img-container"); var cursor = new Cursor(javascript_array); $container.attr("src", cursor.current()); $(".next").click(function(){ $container.attr("src", cursor.next()); }); $(".previous").click(function(){ $container.attr("src", cursor.prev()); }); 

Answer 4

Umm, not sure if this is what you wanted, but:

 $(".previous").click(function(){if (index-1 <0){index = arrayLength -1;} $('.catalog-img-container').attr("src", javascript_array[--index]); //alert(index); }); 

I assume arrayLength = javascript_array.length;

I hope this helps

Answer 5

WORKING DEMO TEST

This is all you need:

 var index=0; $('.catalog-img-container').attr("src", javascript_array[index]); $(".next, .previous").click(function(){ var MyClass = $(this).hasClass('next') ? index++ : index-- ; index = index==-1 ? arrayLength-1 : index%arrayLength ; $('.catalog-img-container').attr("src", javascript_array[index]); }); 

Answer 6

 /** * @param {number} counter * @param {number} maxValue * @return {number} * @desc Always returns a number between 0 and maxValue. Can be used to iterate through an array without "Range out of bounds" error. */ export default function mapToRange(counter, maxValue) { if (maxValue === undefined || maxValue === 0) return 0; // positive counter if (counter >= 0) return counter % maxValue; // negative counter const modulo = counter % maxValue; if (modulo === 0) { return modulo; } return modulo + maxValue; } 

I use this function to display counter , an integer ranging from 0 to maxValue .

 let counter = 0; const array = ['apple', 'pear','peach']; if(press arrow up) counter--; else if (press arrow down) counter++; let idx = mapInRange(counter, array.length) console.log(array[idx]); 

Imagine that you have a drop-down list and you want to navigate through the list using the arrow keys.