0

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

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

使用 JavaScript，我将这些跨度附加到文档片段中。如果我将文档片段附加到容器中，则所有跨度都会按顺序附加到 DOM。我想要的是“打乱”文档片段，然后将其附加到 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>
4

1 回答 1

0

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

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])
}

jsfiddle

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

document.children包含一个NodeList而不是一个数组，因此我们无法Array.sort默认使用随机播放。如果您在下面看到，我已将元素移动到数组中，然后使用Array.sort.

var containerEl = document.querySelector('#mainContainer');
var childrenArr = [];

for (var i = 0; i < containerEl.children.length; i++) {
  childrenArr.push(containerEl.children[i]);
}

// Shuffle array
childrenArr.sort(function() {
  return Math.random() - 0.5;
});

// Re-add shuffled children
for (var i = 0; i < childrenArr.length; i++) {
    containerEl.appendChild(childrenArr[i])
}

jsfiddle

于 2015-12-03T06:54:11.750 回答