主页 / 问题 / 638584
Accepted
Анатолий
Asked:2020-03-13 02:24:41 +0000 UTC2020-03-13 02:24:41 +0000 UTC

如何使用 jQuery 随机排列文本区域中的文本行

  • 772

你好。仅使用 JQuery 帮助洗牌文本区域中的行

有一个表单，它只包含始终以 http 或 https 开头的站点地址

<textarea id="siteList">
https://vk.com
https://mail.google.com
http://ru.stackoverflow.com
http://enjoycss.com
<textarea>

如何，当您单击随机播放按钮时，随机播放文本区域中的所有站点地址

这是我的开始

<script type="text/javascript">
$('html').on('click','#gositelist',function (){
var sitelist = $('#siteList').val();
var arrSitelist = sitelist.split('http');
arrSitelist.sort(function() { return 0.5 - Math.random() });
alert(arrSitelist);
}); 
</script>

我把字符串sitelist转成数组，还是不能正常混合。

javascript

2 个回答

  1. Best Answer

    解决方案jQuery： 

    $.fn.shuffleValueRows = function() {
  var rows = this.val().trim().split('\n');
  var shuffled = shuffle(rows).join('\n');
  this.val(shuffled);
  return this;
  
  function shuffle(o) {
    for(var j, x, i = o.length; i; 
      j = Math.random() * i |0, 
      x = o[--i], 
      o[i] = o[j], 
      o[j] = x);
    return o;
  };
}


$(document).on('click', '.shuffleBtn', function() {
  $($(this).data('selector')).shuffleValueRows();
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="siteList" rows=5 style="width: 100%">
https://vk.com
https://mail.google.com
http://ru.stackoverflow.com
http://enjoycss.com
</textarea>

<hr />
<button class="shuffleBtn" data-selector="#siteList">Shuffle!</button>

    • 3

  2. 好吧，像这样：

    document.querySelector('#shuffle').addEventListener('click', _ => {
  let textarea = document.querySelector('#siteList');
  
  textarea.value = textarea.value.split(`\n`).filter(_ => _).reduce((a, e) => (a.splice(Math.random() * (a.length + 1), 0, e), a), []).join(`\n`);
  /*var chanks = textarea.value.split("\n"),
      shuffled = [];
  
  for(var i = 0; i < chanks.length; i++){
    var chank = chanks[i];
    
    if(/^\s*$/.test(chank)){
      continue;
    }
    
    shuffled.splice(Math.random() * (shuffled.length + 1), 0, chank);
  }
  
  textarea.value = shuffled.join("\n");*/
});
    textarea{
  width: 250px;
  height: 100px;
}
    <textarea id="siteList">
https://vk.com
https://mail.google.com
http://ru.stackoverflow.com
http://enjoycss.com
</textarea><br />
<input type='button' id='shuffle' value='Перемешать!' />

    • 2

相关问题