jquery break loop onclick and continue

Question

I'm just working on simple gallery and want to loop an array once each time I click a button and continue upon clicking again.

My code looks like this:

$(document).ready(function(){
  var pack_img = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
    'image4.jpg',
    'image5.jpg'
  ];

  $("#btn").click(function(){
    for(var i=0; i<pack_img.length; i++) {
       alert(pack_img[i]);
       return false;
     }  
  })
});

I've search already about breaking and continue looping, but seems so very complicated for me

Any idea is greatly appreciated. :)

HoangHieu · Accepted Answer · 2014-05-30 09:16:42Z

4

Try this :

var _index = -1;
$("#btn").click(function(){

    if(_index < pack_img.length){
         _index ++;
    }else{
         _index = 0;
    }
    alert(pack_img[_index ]);
});

edited May 30, 2014 at 9:16

answered May 30, 2014 at 5:33

HoangHieu

2,8403 gold badges32 silver badges46 bronze badges

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

4 Comments

Ballbin Over a year ago

+1 as you don't need to use a for loop to step through an array.

AlexJaa Over a year ago

Works great!!! I haven't thought that it will only require me to use if statement to meet my expectations. Thanks :)

LandonSchropp Over a year ago

Just an FYI: You can replace your if and else statements with _index = (_index + 1) % pack_image.length;

LandonSchropp Over a year ago

Or _index = _index < pack_img.length ? _index + 1 : 0;

Ehsan Sajjad · Accepted Answer · 2014-05-30 05:32:54Z

1

you have to keep track of previous array item like this:

var previous = 0;
$("#btn").click(function(){

    for(var i=previous; i<pack_img.length; i++) {
       previous = i;
       alert(pack_img[i]);
       return false;
     }  

})

answered May 30, 2014 at 5:32

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Comments

jhyap · Accepted Answer · 2014-05-30 05:37:46Z

0

count the click

var cnt = 0;
$("#btn").click(function(){

    for(var i=cnt; i<pack_img.length; i++) {
        if(i != pack_img.length-1){
            console.log(pack_img[i]);
            cnt++;
            break;
        }else{
            console.log(pack_img[i]);
            cnt = 0;
            break;
        }

     }  

})

answered May 30, 2014 at 5:37

jhyap

3,8496 gold badges30 silver badges49 bronze badges

Collectives™ on Stack Overflow

jquery break loop onclick and continue

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related