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

I have a big list <li> of items and a button to "shuffle" the list, what I'm trying to achieve is, show only 3 RANDOM list items when the page loads, then on button click, shuffle the list, hide the current 3 list items and show OTHER RANDOM list items.

我有一个很大的列表

项目和一个“洗牌”列表的按钮，我想要实现的是，当页面加载时只显示3个RANDOM列表项，然后点击按钮，随机播放列表，隐藏当前的3个列表项并显示OTHER RANDOM列表项。

项目和一个“洗牌”列表的按钮，我想要实现的是，当页面加载时只显示3个RANDOM列表项，然后点击按钮，随机播放列表，隐藏当前的3个列表项并显示其他随机列表项。

What I did till now is this, but it doesn't really do everything I'm trying to achieve, I get 3 items showed only, but they get randomised between the same 3 list items always...

我到目前为止所做的是这个，但它并没有真正做到我想要实现的一切，我只得到了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]);
}

Can somebody help me please. Thank you

请有人帮帮我。谢谢

3 个解决方案

#1

Try something like this

尝试这样的事情

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

You need to have six or more <li> elements, otherwise it will be an infinite while (true) loop.

你需要有六个或更多

元素，否则它将是一个无限的while（true）循环。

元素，否则它将是一个无限的，而（真）循环。

#2

try this simple answer, it is very easy and here is the working demo

尝试这个简单的答案，这很容易，这是工作演示

<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>

note: in here, length(number of elements inside the ul) should be a number which can devide from 3, because you want to show 3 per time

注意：在这里，length（ul内的元素数量）应该是一个可以从3开始的数字，因为你想每次显示3个

#3

Hide all items at first. Then generate 3 random number and select item with index using .eq() and show selected items.

首先隐藏所有项目。然后生成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>

#1