Question

我有一组像这样的div：

example

当点击其中一个红色div时，我需要对它们进行随机播放，但是点击的div应始终与黄色div交换。

$('.box-red').click(function() {
    var container = $('#container');
    var nodes = container.children();
    for (var i = 1; i < nodes.length; i++) {
        container.append(nodes.eq(Math.floor(Math.random() * nodes.length)));
    }
});

感谢

Answer 1

我对这个FIDDLE

采取了略微不同的方法

随意添加颜色
点击框
记住方框名称和类
再次随机化所有方框
将“点击”框更改为其他类

我尝试使用rgb代码，但没有得到一致的结果，然后在这里SO，有人更新一个古老的答案并说这种类型的东西最好通过改变班级来处理 - 尤里卡！时刻。似乎工作。我想用rgb玩一些......不是一件容易的事。

JS

$('.box').on('click', function(){
    getboxcolor = $(this).hasClass('blue');
    getboxnum = $(this).attr('id');
    newcolors();
    if( getboxcolor )
    {
     $( '#' + getboxnum ).removeClass( 'blue' );
     $( '#' + getboxnum ).addClass( 'green' );
     }
     else
    {
     $( '#' + getboxnum ).removeClass( 'green' );
     $( '#' + getboxnum ).addClass( 'blue' );
     }
     getboxcolor = '';
     getboxnum = 0;
});

Answer 2

我对小提琴做了一些改变。

首先，你正在进行的改组可能不是一个好的洗牌，因为你有机会复制你试图改组的节点。这使你的洗牌不那么有效。

我使用了Knuth-Fisher-Yates Shuffle的变体。

function shuffle(nodes) {
    var length = nodes.length;
    var randomPick, randomSwap;
    for (var index = length; index > 0; index--) {
        randomPick = Math.floor(Math.random() * index);
        randomSwap = nodes[index - 1];
        nodes[index - 1] = nodes[randomPick];
        nodes[randomPick] = randomSwap;

    }
    return nodes;
}

确保红色框（如果它存在于位置＆＃39; x＆＃39;）的重要部分被黄色框替换，是为了确保您首先存储该索引。

如果该索引上的元素发布了shuffle不是黄色框，那么你找到第一个黄色框然后交换它。

这是一个fiddle，您可以在其中看到它被使用。请注意，这是从您的分叉，但我已经更改了HTML。

$('.box-red').click(function () {

    //Important to store the index at which this red-node was present.
    var currentNodeIndex = $(this).index();

    var container = $('#container');

    var nodes = container.children();

    //Shuffles the node array.
    nodes = shuffle(nodes);

    console.log("Shuffled nodes", nodes);

    //If the current node index does not have a yellow-box, then go ahead and replace it.    
    if (!$(nodes[currentNodeIndex]).hasClass('yellow')) {
        for (var index = 0; index < nodes.length; index++) {
            if (index != currentNodeIndex && $(nodes[index]).hasClass("box-yellow")) {
                var redNode = nodes[currentNodeIndex];
                nodes[currentNodeIndex] = nodes[index];
                nodes[index] = redNode;
                break;
            }
        }
    }

    //Finally, build the complete node tree again.
    container.append(nodes);

});

<强>更新根据King King的建议更新了代码

随机显示（shuffle）div

2 个答案: