Question

我有多组div需要应用随机类，每组都没有重复。一旦我完成了这个，我就需要将数组“重置”回原始值，然后转到下一组div，我再次将随机类应用到每个div。

想法是找到这样的东西：

<div class="mini-thumbnail-container">
    <div class="mini-thumbnail-individual-image left">
    <div class="mini-thumbnail-individual-image centre">
    <div class="mini-thumbnail-individual-image right">
</div>

<div class="mini-thumbnail-container">
    <div class="mini-thumbnail-individual-image centre">
    <div class="mini-thumbnail-individual-image right">
    <div class="mini-thumbnail-individual-image left">
</div>

<div class="mini-thumbnail-container">
    <div class="mini-thumbnail-individual-image right">
    <div class="mini-thumbnail-individual-image left">
    <div class="mini-thumbnail-individual-image centre">
</div>

等

我无耻地从另一个stackoverflow问题中获取代码来解决这个问题，但我无法弄清楚如何让它在我的所有元素上工作，而不是前三个。

这是jQuery：

function shuffle(obj) {
    var l = obj.length,
        i = 0,
        rnd,
        tmp;

    while (i < l) {
        rnd = Math.floor(Math.random() * i);
        tmp = obj[i];
        obj[i] = obj[rnd];
        obj[rnd] = tmp;
        i += 1;
    }
}

var classes = ["centre", "left", "right"];
shuffle(classes);

jQuery(".mini-thumbnail-individual-image").each(function() {
    jQuery(this).addClass(classes.pop());
});

这里是我的div结构的基本轮廓 - 我有多个这些我想要迭代并将随机类应用于每个<div class="mini-thumbnail-individual-image">

HTML：

<div class="col-1-6">
    <div class="mini-thumbnail-container">
        <div class="mini-thumbnail-individual-image">
            <img class="mini-thumbnail-image" src="" />
        </div>
        <div class="mini-thumbnail-individual-image">
            <img class="mini-thumbnail-image" src="" />
        </div>
        <div class="mini-thumbnail-individual-image">
            <img class="mini-thumbnail-image" src="" />
        </div>
    </div>
</div>

我认为我需要创建一个循环，看起来是在每次迭代遍历数组后触发的，一旦它发现数组为空，我需要重新输入类名，然后遍历下一组div ，直到每组div都有一个随机类，但也许有一种我还没想过的更简单的方法。

提前致谢！

Answer 1

你走在正确的轨道上。

如果不谈论优化代码的方法，可以通过以下方法快速找到您需要的地方：

function shuffle(obj) {
    var l = obj.length,
        i = 0,
        rnd,
        tmp;

    while (i < l) {
        rnd = Math.floor(Math.random() * i);
        tmp = obj[i];
        obj[i] = obj[rnd];
        obj[rnd] = tmp;
        i += 1;
    }
}

// declare OUTSIDE the function for correct scope
var classes;

// Simple function to set up the classes variable and shuffle.
function setUpClasses() {
    classes = ["centre", "left", "right"];
    shuffle(classes);
}

jQuery(".mini-thumbnail-individual-image").each(function() {
    // Check if classes is set / empty.  If so, set up the classes again.
    if (!classes  || classes.length < 1) {
        setUpClasses();
    }
    jQuery(this).addClass(classes.pop());
});

如果你想看看更清洁/更简洁的方法来改组数组，this article还有其他一些技巧。这是其中之一：

yourArray.sort(function() { return 0.5 - Math.random() });

所以你可以逐字地删除你的shuffle函数，然后执行此操作：

function setUpClasses() {
    classes = ["centre", "left", "right"];
    classes.sort(function() { return 0.5 - Math.random() });
}

或者，如果你想要最简洁：

function setUpClasses() {
    classes = ["centre", "left", "right"].sort(function() { return 0.5 - Math.random() });
}

Here is a working Fiddle

将随机类应用于多组元素而不重复

1 个答案: