Question

我想要显示4个textarea项目，但我希望它们的显示顺序是随机的。我有这些项目，但我不确定如何做到这一点。

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

Answer 1

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

Answer 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>

Answer 3

＆＃13;

<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>

＆＃13;

ID    MONTH  VAL
1     Jan    nan
1     Feb    nan
1     Mar    nan
1     Apr    nan
1     May    nan
1     Jun    nan
1     Jul    nan
1     Aug    94.0000
1     Sep    113.0000
1     Oct    21.0000
1     Nov    nan
2     Jan    107.00000
.
.
.
7     Nov    nan

＆＃13;

Answer 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。

如何随机显示textarea项目

4 个答案: