使用jQuery显示和隐藏几个随机div

Question

我正在开发一个jQuery应用程序。 我有10个带有引号的div。 我正在尝试创建一个函数，该函数需要一个数字并在10秒钟内随机显示10个div中的引号，并隐藏div。 然后再次重复该过程。 我无法做到这一点，请帮帮我。 这是我的代码：

$(document).ready(function(){

    var div_number = 4;
    var used_numbers = new Array();
    var todo = setInterval(showQuotes(),3000);

    function showQuotes(){
        used_numbers.splice(0,used_numbers.length);
        $('.quotes').hide();
        for(var inc = 0; inc<div_number; inc++) {
            var random = get_random_number();
            $('.quotes:eq('+random+')').show();
        }
        $('.quotes').fadeOut(3000); 
    }

    function get_random_number(){
        var number = randomFromTo(0,9);
        if($.inArray(number, used_numbers) != -1) {
            get_random_number();
        }
        else {
            used_numbers.push(number);
            return number;
        }
    }
    function randomFromTo(from, to){
       return Math.floor(Math.random() * (to - from + 1) + from);
    }
});

Answer 1

我所做的更改：

• 通过样式表在启动时隐藏.quotes
• 在setInterval（showQuotes，10000）之前运行一次showQuotes（），然后
• 在淡出引号之前添加.delay（）
• Py的“返回”已添加到get_random_number

http://jsfiddle.net/cMQdj/1/

更改后的JavaScript：

$(document).ready(function () {
    var div_number = 4;
    var used_numbers = new Array();
    showQuotes();
    var todo = setInterval(showQuotes, 10000);

    function showQuotes() {
        used_numbers.splice(0, used_numbers.length);
        $('.quotes').hide();
        for (var inc = 0; inc < div_number; inc++) {
            var random = get_random_number();
            $('.quotes:eq(' + random + ')').show();
        }
        $('.quotes').delay(6000).fadeOut(3000);
    }

    function get_random_number() {
        var number = randomFromTo(0, 9);
        if ($.inArray(number, used_numbers) != -1) {
            return get_random_number(); 
        } else {
            used_numbers.push(number);
            return number;
        }
    }
    function randomFromTo(from, to) {
        return Math.floor(Math.random() * (to - from + 1) + from);
    }
});

并添加到您的样式表：

.quotes {display:none}

Answer 2

我没有测试所有内容，但是我已经看到有一点可能会阻止您， get_random_number并不总是返回数字。 为此，应该

function get_random_number(){
    var number = randomFromTo(0,9);
    if($.inArray(number, used_numbers) != -1)
        {
        return get_random_number();
        }
    else
        {
        used_numbers.push(number);
        return number;
        }
}

希望能有所帮助。