在Javascript中的列表中随机播放单词[重复]答案

【问题标题】：Shuffle words in a list in Javascript [duplicate]在Javascript中的列表中随机播放单词[重复]
【发布时间】：2014-01-10 11:06:33
【问题描述】：

我做了以下小提琴，可以将一个列表中的单词拖放到另一个列表中，反之亦然。

Fiddle

拖放代码相当简单。

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

每个单词都有draggable="true"

虽然两个 div 都有 ondrop="drop(event)" ondragover="allowDrop(event)"

现在，我需要一个函数来随机播放每个列表中的单词。

基本上，在单击按钮时，它应该调用一个函数，该函数将随机播放任一列表中的单词。老实说，我不知道该怎么做。我正在考虑使用 Javascript 的

var input = a.getElementsByTagName('span') 在我的 Fiddle 中，<span> 包含每个单独的单词。

同时，我想知道是不是和这个question类似。如果是，有人可以帮助我解决当前的问题。

谢谢。

【问题讨论】：

肯定Google hadn't any hits 用于“shuffle array javascript”？
如果您阅读了我的问题，我已经清楚地标记了一个类似的问题。评论前请阅读。

标签： javascript jquery html css

【解决方案1】：

使用以下shuffle函数：How can I shuffle an array?

function shuffle(o){ 
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
}

使用jQuery的示例：

http://jsfiddle.net/trevordowdle/E4qzS/11/

$('#shuffle').click(function(){
    var spanArray = [];
    $('[id^=div]').each(function(){
        spanArray.length = 0;
        $(this).find('span').each(function(){
            spanArray.push($(this));    
        });
        spanArray = shuffle(spanArray);
        $(this).empty();
        for(var i = 0;i<spanArray.length;i++)
            $(this).append(spanArray[i]);    
     });  
});

【讨论】：

【解决方案2】：

使用很棒的underscorejs 或lodash。这些库提供了javascript的实用函数，提供了很多不错的功能。

现在洗牌，这样做：

// your array
myWordArray = [...]
$('.shuffle').click(function {
  myWordArray = _.shuffle(myWordArray);
}

【讨论】：

【解决方案3】：

如果你想使用简单的 JavaScript，你可以这样做：

在 HTML 中添加随机播放按钮：

<button id='btn-shuffle'>SHUFFLE</button>

将这些函数添加到 JS 中：

function shuffleNodes(parent) {
    var nodes = parent.childNodes;
    var arr = [];
    for(var i = 0; i < nodes.length; i++) {
        arr.push(nodes[i]);
    }
    arr.sort(function() {
        return Math.random() < 0.5 ? -1 : 1;
    });
    parent.innerHTML = '';
    for(var j = 0; j < arr.length; j++) {
        parent.appendChild(arr[j]);
    }
}

document.getElementById('btn-shuffle').addEventListener('click', function() {
    shuffleNodes(document.getElementById('div1'));
    shuffleNodes(document.getElementById('div2'));
});

更新小提琴：http://jsfiddle.net/imcg/9EDzN/

【讨论】：