Question

我正在尝试制作一个可以匹配事物的基本随机数发生器。有点像日期（浪漫）选择器，但情况不同。

我希望产品看起来像这样：

（用户输入A1）

（用户输入A2）

（用户输入A3）

（用户输入B1）

（用户输入B2）

（用户输入B3）

A输入随机匹配B输入，但A从不匹配A，A不随机化。

所以它看起来像这样：

A1 - （B＃）

A2 - （B＃）

A3 - （B＃）

问题是，我很害怕JS。我在Codecademy上学习了一些HTML / CSS / jQuery。我一直在尝试不同的事情，但他们一直都在失败。有人能帮助我吗？

HTML：

<!DOCTYPE html>
<html>
<head>
<link class="jsbin"             href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">                </script>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
</head>
<body>


<ul> People
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>  
</ul>
<hr />
<ul> Jobs
  <li><input></input></li>
  <li><input></input></li>
  <li><input></input></li>
  <li><input></input></li>
  <li><input></input></li>
  <li><input></input></li>
  <li><input></input></li>
  <li><input></input></li>
  <li><input></input></li>  
</ul>
</body>
</html>

JS：

$(document).ready(function () {
    $('#jobs').find('li').shuffle();
    var mynewlist = '';
    $('#people').find('li').each(function (index) {
        var jb = $('#jobs').find('li').eq(index);
        mynewlist += '<li>Person:' +  $(this).text() + ' Job:' + jb.text() + '</li>';
    });
    $(mynewlist).appendTo('#newList');
});

http://jsbin.com/ijotok/1

这就是我所拥有的。

我希望输入随机化，但不起作用。

这是我的第一篇文章。对不起，如果它违反规则或任何事情，但我告诉我的老板，我会在2周前完成这项工作。

Answer 1

您的随机化方法数组未经过优化，无法使用。

请参阅我的更正以解决您的错误：

$(document).ready(function(){
  $('ul').each(function(){
        // get current ul
        var $ul = $(this);
        // get array of list items in current ul
        var $liArr = $ul.children('li');
        // get lenth of the array
        var arrLen = $liArr.length;
        // sort array of list items in current ul randomly
        var $newArr = [];
        do{
            // Generate a randomize int
            var rndNumber = parseInt(Math.random() * arrLen);       
            // Extract a element to add it into new Array
            $newArr.push($liArr.slice(rndNumber,1));
            // Remove the element from the array  
            $liArr.splice(rndNumber, 1);
            // Decrement the length array
            arrLen--;
        }
      while(arrLen >= 0);
      // Add new table
      $(this).append($newArr);        
  });
});

http://jsfiddle.net/DiGui/2taTa/1/

Answer 2

使用此标记：注意：将ID添加到标记以便于使用。

<ul id="people">People
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<hr />
<ul id="jobs">Jobs
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<hr />
<ul id='newList'>New List</ul>

此代码：

jQuery.fn.shuffle = function () {
    var j;
    for (var i = 0; i < this.length; i++) {
        j = Math.floor(Math.random() * this.length);
        $(this[i]).before($(this[j]));
    }
    return this;
};
$(document).ready(function () {
    $('#jobs').find('li').shuffle();
    var mynewlist = '';
    $('#people').find('li').each(function (index) {
        var el = $('#people').find('li').eq(index);
        var jb = $('#jobs').find('li').eq(index);
        mynewlist += '<li>Person:' + el.text() + ' Job:' + jb.text() + '</li>';
    });
    $(mynewlist).appendTo('#newList');
});

工作示例：http://jsfiddle.net/f8wk5/

编辑：最后一部分的更紧凑版本：shuffle保持不变

$(document).ready(function () {
    $('#jobs').find('li').shuffle();
    var mynewlist = '';
    $('#people').find('li').each(function (index) {
        var jb = $('#jobs').find('li').eq(index);
        mynewlist += '<li>Person:' +  $(this).text() + ' Job:' + jb.text() + '</li>';
    });
    $(mynewlist).appendTo('#newList');
});

使用JS / jQuery添加输入match-randomizer？（编辑）的

2 个答案:

使用JS / jQuery添加输入match-randomizer？ （编辑）的

2 个答案:

使用JS / jQuery添加输入match-randomizer？（编辑）的