Question

这是我的第一个问题，所以我对任何格式问题，无知的遗漏或过度解释表示道歉。我对Javascript几乎全新，经过一天的修改后，我决定寻求帮助。

目前：我有一个无序列表，用作选择器以显示与之关联的图库。我试图做的是修改下面的代码，使图像以随机顺序加载，而不是默认（按最后添加的顺序加载）。我一直试图使用Fisher Yates方法，但我要么错误地实现它，要么只是混淆了。任何帮助将不胜感激，并感谢您花时间阅读本文。

 $('#artist-list li').click(function(event){
    event.preventDefault();
    var artist = $(this).attr('data-artist');

    // Highlight selected menu item
    $('#artist-list li').removeClass('active');
    $(this).addClass('active');

    // Show selected artist bio
    $('.artist-bio, .artist-image').hide();
    $('#artist-'+artist+', #artist-image-'+artist).show();

    $('#image-list li').not('.primary').hide();
    $('#image-list li.'+artist).show().children('a').attr('rel', artist);
}); // End click

$('#artist-list.departments li').click(function(event){
    event.preventDefault();
    var artist = $(this).attr('data-dept');

    // Highlight selected menu item
    $('#artist-list li').removeClass('active');
    $(this).addClass('active');

    // Show selected artist bio
    $('.artist-bio, .artist-image').hide();
    $('#artist-'+artist+', #artist-image-'+artist).show();

    $('#image-list li').not('.primary').hide();
    $('#image-list li.'+artist).show().children('a').attr('rel', artist);
}); // End click

Answer 1

我发现这个有用的插件可以为你洗牌：

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

并在列表中执行此操作：

<ul id="gallery">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

称之为：

$('#gallery li').shuffle();

jsFiddle：http://jsfiddle.net/hescano/4XFQr/

来源：http://css-tricks.com/snippets/jquery/shuffle-dom-elements/

在加载/选择时随机化图像库

1 个答案: