Question

我正在尝试创建一个快速移动图像的页面。通过“改组”，我的意思是随机改变位置（快速），而不是this jsfiddle example，其中元素的放置保持不变，并且将类添加到随机标识的项目以指示新的选择。以下是实现此目的的代码：

function shuffle(array) {
  var m = array.length, t, i;

  // While there remain elements to shuffle…
  while (m) {

    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }

  return array;
}

$(function() {
    $("button").click(function() {
        var $all = $("li").removeClass("selected");
        $(shuffle($all).slice(0, $("input").val())).addClass("selected");
    });
});

根据我的想法，如果所有照片最初分配给div，例如，我如何使用类似的shuffle（）功能随机更改图像分配给的div？或者有人可能提出任何其他方式？

Answer 1

尝试使用.each()，.not()，.insertBefore()，.eq()

$(function () {
    $("button").click(function () {
        var $all = $("li").removeClass("selected");
        var selected = $(shuffle($all).slice(0, $("input").val()));
        selected.addClass("selected")
        .each(function () {
          $(this).insertBefore(
            $all.not(".selected")
            .eq(Math.random() * $all.not(".selected").length + 1)
          )
        });
    });
});

jsfiddle http://jsfiddle.net/fK8Xw/110/

Answer 2

无论如何，我这样做的方式与guest271714不同，他做得非常好。

正如另一种选择。 http://jsfiddle.net/fK8Xw/111/

$(function () {
    $("button").click(function () {
        var $all = $("li")
        $all.removeClass("selected");
        var data = shuffle($all).slice(0, $("input").val());
        var first = $(data).eq(0).prop('innerHTML');
        for (var i = 0; i < data.length; i++) {
            var next = $(data).eq(i + 1).html();
            if (i === data.length - 1) {
                $(data).eq(i).html(first);
            } else {
                $(data).eq(i).html(next);
            }
        }
        $(data).addClass("selected");
    });
});

快速图像随机播放

2 个答案: