Question

我正在使用jquery中的flip，我从数组中选择随机值并将其分配给翻转选项。

这是我的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中很好：

只需在点击时创建变量，这样当您点击时，新值就会来自数组。

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/

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

2 个答案: