如何使用jQuery顯示列表的3個隨機項？

Question

我有一個很大的項目列表<li>和一個“隨機播放”列表的按鈕，我要實現的是，頁面加載時僅顯示3個RANDOM列表項目，然后單擊按鈕，隨機播放列表，隱藏當前的3個列表項，並顯示OTHER RANDOM個列表項。

到現在為止我所做的就是這個，但是它並沒有真正完成我想要達到的所有目的，我只顯示了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]);
}

有人可以幫我嗎。 謝謝

Answer 1

試試這個

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)循環。

Answer 2

試試這個簡單的答案，這很容易，這是工作示例

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

注意：在這里，length（ul內的元素數）應該是一個可以從3開始的數，因為您希望每次顯示3

Answer 3

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

如何使用jQuery顯示列表的3個隨機項？

問題描述

3 個解決方案

解決方案1
4 已采納 2016-09-11 15:43:51

解決方案2
0 2016-09-11 15:53:32

解決方案3
0 2016-09-12 07:03:32

如何使用jQuery顯示列表的3個隨機項？

問題描述

3 個解決方案

解決方案1 4 已采納 2016-09-11 15:43:51

解決方案2 0 2016-09-11 15:53:32

解決方案3 0 2016-09-12 07:03:32

解決方案1
4 已采納 2016-09-11 15:43:51

解決方案2
0 2016-09-11 15:53:32

解決方案3
0 2016-09-12 07:03:32