如何使用jquery显示3个随机列表项

How to show 3 random item of list using jquery?

本文关键字：随机 列表 3个 显示 何使用 jquery      更新时间：2023-09-26

我有一个大列表<li>的项目和一个按钮来"洗牌"列表，我想要实现的是，当页面加载时只显示3个随机列表项目，然后点击按钮，洗牌列表，隐藏当前3个列表项目并显示其他随机列表项目。

我到现在为止所做的就是这样，但它并没有真正做到我想要实现的一切，我只显示了3个项目，但它们总是在相同的3个列表项目之间随机化…

$('.fr_revs > li').hide().filter(':lt(3)').show();
var ul = document.querySelector('.fr_revs');
for (var i = ul.children.length; i >= 0; i--) {
    ul.appendChild(ul.children[Math.random() * i | 0]);
}
有谁能帮帮我吗?谢谢你

试试这样

var ul = $('ul'),
    lis = ul.find('li').detach(),
    button = $('#shuffle'),
    used = [];
function showRandom() {
    var new_lis = [];
    while (true) {
      var li = lis[Math.floor(Math.random() * lis.length)];
      if (used.indexOf(li) === -1 && new_lis.indexOf(li) === -1) new_lis.push(li);
      if (new_lis.length >= 3) break;
    }
    used = new_lis;
    ul.html(new_lis);
}
button.click(showRandom);
showRandom();

你需要有六个或更多的<li>元素，否则它将是一个无限的while (true)循环

首先隐藏所有项。然后生成3个随机数，用.eq()索引选择项目，并显示选中的项目。

$(".fr_revs > li").hide();
randomItem();
$("button").click(function(){
    var lastItems = $(".fr_revs > li:visible");
    randomItem();
    lastItems.hide();
});
function randomItem(){
    for (var i = 0; i < 3; i++){
        var length = $(".fr_revs > li:not(:visible)").length;
        var random = Math.floor(Math.random() * length);
        $(".fr_revs > li:not(:visible)").eq(random).show();
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Get new</button>
<ul class="fr_revs">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
    <li>I</li>
    <li>J</li>
    <li>K</li>
    <li>L</li>
    <li>M</li>
    <li>N</li>
    <li>O</li>
</ul>

试试这个简单的答案，它很简单，下面是工作演示

<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">

</style>
<body>
<input type="button" value="click to shuffle" id="shuffle">
<ul class="mylist">
 <li id="id1">one</li>
 <li id="id2">two</li>
 <li id="id3">three</li>
 <li id="id4">four</li>
 <li id="id5">five</li>
 <li id="id6">six</li>
 <li id="id7">seven</li>
 <li id="id8">eight</li>
 <li id="id9">nine</li>
 <li id="id10">ten</li>
 <li id="id11">eleven</li>
 <li id="id12">twelve</li>
</ul>
</body>
<script type="text/javascript">
$(document).ready(function(){
	$("ul.mylist li").slice(3).hide();
	var theCount  = 3;
	$("#shuffle").click(function(){
		
		$("ul.mylist li").hide();
		var theLength = $("ul.mylist li").length;
		if(theCount == theLength)
		{
			theCount = 3;
		}
		else
		{
			theCount = theCount + 3;
		}
		$("ul.mylist li").slice(theCount-3,theCount).show();
		
	 });	
	});
</script>
</html>

注意:在这里，长度(ul中元素的数量)应该是一个可以除以3的数字，因为你想每次显示3

相关文章：