Question

我有一个动态生成的文本区域和按钮通过JavaScript。我有它工作，以便当一个值输入文本区域，然后单击该按钮时，将创建随机数量的SPAN标记。对于文本区域中值的每个字符，将创建一个隐藏属性的span标记。

这是一个工作小提琴： https://jsfiddle.net/9feso12c/

使用JavaScript，我将这些跨度附加到文档片段。如果我将文档片段附加到容器，则所有跨度按顺序附加到DOM。我想要的是＆＃34;争抢＆＃34;文档片段，然后将它附加到DOM。

当HELLO键入文本区域并单击按钮时，我现在拥有了什么：

    <div id="mainContainer">
        <span hidden>H</span>
        <span hidden>E</span>
        <span hidden>L</span>
        <span hidden>L</span>
        <span hidden>O</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
    </div>

我想要的是什么：

    <div id="mainContainer">
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span hidden>H</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span hidden>E</span>
        <span>Q</span>
        <span>Q</span>
        <span hidden>L</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span hidden>L</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span hidden>O</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
    </div>

Answer 1

使用underscore.js这很容易。当然你也可以自己编写这个函数：

select

jsfiddle

编辑：要在没有下划线的情况下完成此操作：

var containerEl = document.querySelector('#mainContainer'); var shuffleArr = _.shuffle(containerEl.children); // Empty container containerEl.innerHTML = ""; // Re-add shuffled children for (var i = 0; i < shuffleArr.length; i++) { containerEl.appendChild(shuffleArr[i]) }包含NodeList而不是数组，因此默认情况下我们无法使用document.children进行随机播放。如果您在下面看到我已将元素移动到数组中，然后使用Array.sort。

Array.sort

jsfiddle

在使用JavaScript

1 个答案:

编辑：要在没有下划线的情况下完成此操作：