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

Question

我有一个大 list <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]);
}

有人可以帮帮我吗？谢谢

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