Сделать мою инициализацию MetroJs более эффективной и чистой

Question

Я использую MetroJ, и я использовал отдельную функцию для инициализации каждой плитки, потому что я только хочу видеть заднюю часть одной плитки за раз. Таким образом, с помощью этого кода каждая плитка полностью анимируется, показывая заднюю и переднюю части, а затем делает паузу на некоторое время, чтобы другие плитки делали то же самое.

В любом случае, это не важно, так как вы можете видеть, что мой код сейчас довольно неэффективен с большим количеством повторяющегося кода. Как вы думаете, я мог бы улучшить это, чтобы сделать его намного короче? Я думал об использовании цикла для инициализации их всех, но я не уверен, как это сделать.

Причина, по которой я использовал отдельные инициализаторы, заключается в том, что мне нужно создать счетчик, который применяется к каждой плитке, но я не могу создать переменную счетчика изнутри .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;
        }
    }
});

Один из способов сделать count немного более чистыми переменными может быть перемещение каждой инициализации в функцию, которая создает переменную count внутри этой функции, но, опять же, тогда мне нужно будет сделать остальные немного более эффективными.

Answer 1

Можете добавить data-count='0' в .live-tile Предметы?

$('.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');
        }
    }
});

Если нет, вы также можете сделать это:

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