Question

我正在使用MetroJs并且我使用了一个单独的函数来初始化每个图块，因为我只想一次看到一个图块的背面。因此，使用此代码，每个磁贴完全动画，显示背面和正面，然后暂停一段时间，以便其他磁贴执行相同的操作。

无论如何，这并不重要，因为你可以看到我的代码现在使用大量重复代码效率很低。您如何认为我可以改进它以缩短它？我已经考虑过使用循环来初始化它们，但我不知道该怎么做。

我使用个别初始化程序的原因是我需要创建一个适用于每个tile的计数，但我无法从.liveTile()

中创建count变量

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变量更清洁的一种方法是将每个初始化移动到一个函数中，该函数在该函数内部创建计数变量，但是我需要再次使其余部分更有效

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

使MetroJs初始化更加高效和清洁

1 个答案: