使用CSS类

Question

我在页面上有一些正方形，当点击翻转时，就像卡片一样，你可以看到背面。

JS小提琴：http://jsfiddle.net/d1botfu2/

这似乎工作得很好，但是，我也希望每隔几秒自动翻转一个正方形（几乎像屏幕保护程序）然后翻转并使用与点击事件相同的动画翻转另一个随机图像。

我尝试过使用切换但是将其变为白色

$(document).ready(function () {

function change() {
    randomElements = jQuery("div.flipper").get().sort(function(){
        return Math.round(Math.random())-0.5
    }).slice(0,1)
    $(randomElements).toggle('active');
    console.log("Change");
}

setInterval(function () {
    change();
}, 1000);

});

Answer 1

通过'你的代码并做了一些修复。希望这是您正在寻找的解决方案，

$(document).ready(function () {

function change() { debugger;
    randomElements = jQuery("div.flip-container").get().sort(function(){
        return Math.round(Math.random())-0.5
    }).slice(0,1)

    $(randomElements).toggleClass('active');
    console.log("Change");
}

setInterval(function () {
    change();
}, 1000);

}）;

http://jsfiddle.net/d1botfu2/4/

Answer 2

看一下这个：https://api.jquery.com/eq-selector/

和这一个：http://www.w3schools.com/jsref/jsref_random.asp

使用随机数，您可以选择类类型的随机元素。

未经测试的例子：

$( ".div.flipper:eq(' + Math.floor(Math.random() * 10) + ')" ).trigger('click')

^这应该选择1到10之间的随机卡（或更确切地说，0到9）并触发其click - 事件

window.setInterval(function(){
    $( ".div.flipper:eq(' + Math.floor(Math.random() * 10) + ')" ).trigger('click')
    flipTimer ;
}, 1000);