Making my MetroJs initialisation more efficient and cleaner

Question

I'm using MetroJs and I've used an individual function to initialize each tile because I only ever want to see the back of one tile at a time. So with this code, each tile fully animates, showing the back and front, and then pauses for a while so that the other tiles do the same.

Anyway, that isn't important, as you can see my code is pretty inefficient now with a lot of repeat code. How do you think I could improve this to make it a lot shorter? I've thought about using a loop to initialise them all but I'm not sure how to go about it.

The reason I have used individual initialisers is that I need to create a count which applies to each tile, but I cant create the count variable from within .liveTile()

JS:

var count1 = 0;
var count2 = 0;

$('.live-tile.one').liveTile({
    animationComplete:function() {
        count1++;
        if (count1 == 2) {
            $('.live-tile.one').liveTile("restart", 10000);
            count1 = 0;
        }
    }
});

$('.live-tile.two').liveTile({
    animationComplete:function() {
        count2++;
        if (count2 == 2) {
            $('.live-tile.two').liveTile("restart", 10000);
            count2 = 0;
        }
    }
});

One way to make the count variables a bit cleaner could be to move each initialisation into a function, which creates the count variable inside that function, but again then I would need to make the rest a bit more efficient.

Answer 1

Can you add data-count='0' to .live-tile items?

$('.live-tile').liveTile({
    animationComplete:function() {
        var count = parseInt($(this).data('count'));
        count++;
        $(this).data('count', count);
        if (count == 2) {
            $(this).liveTile("restart", 10000);
            $(this).data('count', '0');
        }
    }
});

If not, you can also do this:

var counts =[0, 0, 0, 0, 0;]

$('.live-tile').liveTile({//.find will let you access all divs (.one, .two, etc.) at once that .live-tile contains
    animationComplete:function() {
        var index = $(this).index();//the index of div item (among the div items of .live-tile, it will be 0 for .one, 1 for .two, 2 for .three, etc.
        var count = counts[index];//bring the current value based on the index
        count++;//increase it 
        counts[index] = count;//restore it to the correct index
        if (count == 2) {
            $(this).liveTile("restart", 10000);
            counts[index] = 0);//reset
        }
    }
});