javascript - 在 Javascript 列表中随机排列单词

标签 javascript jquery html css

<分区>

我制作了以下 fiddle ,其中一个列表中的单词可以拖放到另一个列表中,反之亦然。

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 .如果是,有人可以帮助我如何使用它来解决我当前的问题。

谢谢。

最佳答案

使用以下 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]);    
     });  
});

关于javascript - 在 Javascript 列表中随机排列单词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20723056/

相关文章:

html - 带照片的 Bootstrap 轮播 : optimal image size?

javascript - 有没有办法在离线时使用 JavaScript 文件? (HTML/JADE/JS/离线)

javascript - 无法将虚拟键盘 jQuery 插件与 Angular 4 +Webpack 一起使用

javascript - 如何使用 AutoNumeric js 动态打印输入的原始值?

jquery - 当我在调整大小的窗口中滚动半视差时出现空白

javascript - Javascript 关闭不起作用

javascript - 在 setInterval 中获取正确的上下文

javascript - 从 Electron 主脚本触发点击

javascript - NodeJS 和 ExpressJS - Javascript 文件加载,但 CSS 文件不加载

javascript - Chrome 28 应用程序,getUserMedia PERMISSION_DENIED