选择rand和分配给变量的数组

Question

我正在尝试在jQuery中进行翻转，我从数组中选择了随机值，并将其分配给了翻转选项。

这是我的html代码

<div class="flipbox-container box100">
            <div id="flipbox1" class="flipbox">
                <h1>thesoftwareguy</h1>
            </div>
        </div>
<button id="btn-left">click</button>

这是我的jQuery

var directions = ['#E0E0E0','#E0E0E0','#E0E0E0','#E0E0E0','#E0E0E0','#E0E0E0','#E0E0E0'];
 var colors = ['top','right','bottom','left'];
 var ran_dir = directions[Math.floor(Math.random() * directions.length)];
 var ran_col = colors[Math.floor(Math.random() * colors.length)]; 

$("#btn-left").on("click",function(e){
    $(".flipbox").flippy({
        color_target: ran_col,
        direction: ran_dir,
        duration: "750",
        verso: "<h1>Roses are Red.</h1>",
     });
     e.preventDefault();
});

问题是，当我单击按钮时，翻盖会持续旋转。 如何选择随机值并分配给翻转功能选项。

这是我的jsfiddle

Answer 1

需要注意的一件事是，您的颜色和方向列表向后。

var directions = ['#E0E0E0','#E0E0E0','#E0E0E0','#E0E0E0','#E0E0E0','#E0E0E0','#E0E0E0'];
var colors = ['top','right','bottom','left'];

应该

var colors = ['#E0E0E0','#E0E0E0','#E0E0E0','#E0E0E0','#E0E0E0','#E0E0E0','#E0E0E0'];
var directions = ['top','right','bottom','left'];

这也是我使用的小提琴（由于链接不起作用，最终只是将jquery.flippy.min.js复制到javascript部分。）问题是我上面提到的导致其无限循环，方向和颜色的问题向后。 我还添加了click事件中的颜色和方向更改，而不仅仅是页面加载时的1次更改。

http://jsfiddle.net/Q4TRE/2/

Answer 2

您的逻辑在jsfiddle中很好：

只需在click上创建变量，以便每次单击时都会从数组中获得新值。

var directions = ['#E0E0E0','#E0E0E0','#E0E0E0','#E0E0E0','#E0E0E0','#E0E0E0','#E0E0E0'];
var colors = ['top','right','bottom','left'];


$("#btn-left").on("click",function(e){
    var ran_dir = directions[Math.floor(Math.random() * directions.length)];
    var ran_col = colors[Math.floor(Math.random() * colors.length)]; 

    console.log(ran_dir, ran_col);

    $(".flipbox").flippy({
        color_target: ran_col,
        direction: ran_dir,
        duration: "750",
        verso: "<h1>Roses are Red.</h1>",
    });
    e.preventDefault();
});

您的jsfiddle无法正常工作，因为jquery.flippy.js没有被加载。 它给403加载问题。

您可以在控制台中查看更新的值： http : //jsfiddle.net/ashishanexpert/5T4aX/3/