如何随机显示textarea项目答案

【问题标题】：How to randomly display textarea items如何随机显示textarea项目
【发布时间】：2018-08-01 15:02:58
【问题描述】：

我有 4 个要显示的文本区域项目，但我希望它们显示的顺序是随机的。我有这些物品，但我不确定我将如何去做。

<div>
    <textarea>text 1</textarea>
    <textarea>text 2</textarea>
    <textarea>text 3</textarea>
    <textarea>text 4</textarea>
</div>

【问题讨论】：

标签： javascript html meteor jsx

【解决方案1】：

首先，随机设置四个变量，然后使用 document.write，或者更好的是，将 document.getElementById('output').innerHTML 设置为带有文本变量的 textarea。

【讨论】：

【解决方案2】：

// Shuffle sort
let shuffleSort = () => (0.5 - Math.random());

// Get your textareas
let txtAreas = Array.from(document.querySelectorAll('.container textarea'))

// Define a few grid areas
let styles = ["one", "two", "three", "four"];

// Shuffle textareas and add the styles in order by index
txtAreas.sort(shuffleSort).forEach((textarea, i) => {
  textarea.classList.add(styles[i])
})

.container {
  display: grid;
  grid-template-areas: "one" "two" "three" "four";
}

.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

.four {
  grid-area: four;
}

<div class="container">
  <textarea>1</textarea>
  <textarea>2</textarea>
  <textarea>3</textarea>
  <textarea>4</textarea>
</div>

【讨论】：

谢谢！这简单易懂。

【解决方案3】：

// Get children of main and prepare an array with their values

let x = $("#main").children();
let beginArr = [];
for (let y = 0; y < x.length; ++y) {
  beginArr.push(y);
}

// Shuffle sort and create a new array
let finalArr = [];
let y = 0;
do {
  let z = Math.floor(Math.random() * (x.length - y));
  finalArr.push(beginArr[z]);
  beginArr.splice(z, 1);  
  y++;
} while (y < x.length);

// Rearrange the output
let domElem = '';
for (let y = 0; y < finalArr.length; ++y) {
	domElem += x[finalArr[y]].outerHTML;
}

$("#main").html('');
$("#main").append(domElem);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <textarea>1</textarea>
  <textarea>2</textarea>
  <textarea>3</textarea>
  <textarea>4</textarea>
</div>

【讨论】：

【解决方案4】：

我注意到你的标签中有 React，所以我做了一个快速的 React 示例。没有状态管理，所以有点不完整，但希望你能明白。

class TextArea extends React.Component {
  constructor(props) {
    super()
    this.state = {
      text: props.text || ''
    }
  }
  
  change = (e) => {
    this.setState({text: e.target.value})
  }
  
  render() {
    return <textarea onChange={this.change} value={this.state.text} />
  }
}

class TextAreas extends React.Component {
  constructor() {
    super()

    this.state = {
      data: [
        {key: 1, text: 'text 1'},
        {key: 2, text: 'text 2'},
        {key: 3, text: 'text 3'},
        {key: 4, text: 'text 4'}
      ]}
  }
  
  shuffle = () => {
    this.setState({data: _.shuffle(this.state.data)})
  }

  render() {
    return <div>
      {this.state.data.map(txt => 
        <TextArea key={txt.key} text={txt.text} />
      )}
      <button onClick={this.shuffle}>Shuffle</button>
      </div>
  }
}

ReactDOM.render(<TextAreas/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='root'></div>

其他人回应的概念是正确的：只需打乱一个 JS 数组并使用它来生成 DOM。

【讨论】：