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

我正在开发一个jquery应用程序。 我有10个带引号的div。 我正在尝试创建一个函数,它接受一个数字并随机显示10个div中的引号数10秒并隐藏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); } }); 

我做的改变:

  • 通过样式表隐藏.quotes
  • 在setInterval(showQuotes,10000)和之前运行showQuotes()一次
  • 在淡出引号之前添加.delay()
  • Py的’return’被添加到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} 

我没有测试所有内容,但我已经看到一个可能阻止你的点, 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; } } 

希望有所帮助。