Question

我有一个巨大的名单，我想要在ul中。我只想同时显示其中的20个。理想情况下，我想随机淡出和淡出列表项。因此，为简化起见，我们列出了10个项目：

<ul id="names">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>

我知道我可以按顺序随机化订单：

(function($){

    $.fn.shuffle = function() {

        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });

        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });

        return $(shuffled);

    };

})(jQuery);

$(document).ready(function () {
  $('#names li').shuffle();
});

我的问题是如何一次只显示其中3个列表项并随机淡入和淡出其他单个列表项？此外，我希望每个项目在列表项级别上随机更改 - 而不是全新的UL。

Answer 1

因此，我会将您的所有名称存储在JavaScript数组中，而不是存储在html中。在您的UL中只有3个LI，具有相同的类名或属性名，或者在某种程度上识别它们。然后在一个时间间隔内运行一个JavaScript函数，通过使用JavaScript's Math.random() function选择两者中的随机索引，将随机LI中的名称与数组中的随机名称进行交换：

HTML：

<ul>
  <li class="randomName">Steve</li>
  <li class="randomName">Gary</li>
  <li class="randomName">Joan</li>
</ul>

JS：

var names = ['Carlos', 'Khaleel', 'Zach', 'Noah', 'David', 'Nick', 'John', 'Haley', 'Molly', 'Stan', 'Brad', 'Pierre', 'Swati', 'Sarah', 'Steve', 'Gary', 'Joan'];

var lis = document.getElementsByClassName('randomName');

window.setInterval(function changeNameRandomly() {
  var randomNamesIndex = Math.floor(Math.random() * names.length);
  var randomLiIndex = Math.floor(Math.random() * lis.length);
  $(lis[randomLiIndex]).fadeOut("fast", function() {
    $(lis[randomLiIndex]).html(names[randomNamesIndex]);
    $(lis[randomLiIndex]).fadeIn();
  }.bind(this)); 
}, 3000);

Working CodePen

随机淡入和淡出列表项

1 个答案: