使用jquery显示和隐藏几个随机div [英] show and hide several random divs using jquery

问题描述

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

i am developing a jquery application. I have 10 divs with quotes. I am trying to create a function that takes a number and randomly displays that number of quotes from the 10 divs for 10 seconds and hide the divs. Then repeat the process again. I have not been able to do it please help me out. here is my code:

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

推荐答案

我所做的改变：

• 通过样式表隐藏启动时的.quotes


• 在setInterval（showQuotes，10000）之前运行showQuotes（）一次，并且


• 在淡出引号之前添加.delay（）


• 将Py的'return'添加到get_random_number

• hide the .quotes on launch via a stylesheet
• run showQuotes() once before setInterval(showQuotes,10000), and
• add a .delay() before fading the quotes out
• Py's 'return' added to get_random_number

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

更改后的JavaScript：

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

并添加到您的样式表中：

and add to your stylesheet:

.quotes {display:none}

这篇关于使用jquery显示和隐藏几个随机div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！