0

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

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

（用户输入 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

这就是我所拥有的。

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

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

4

2 回答 2

0

您的随机化方法阵列未优化并且永远不会工作。

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

$(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/

于 2013-05-13T19:53:59.920 回答
0

使用此标记：注意：在标记中添加了 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/

编辑：最后一部分稍微更紧凑的版本：洗牌保持不变

$(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');
});
于 2013-05-13T20:18:53.393 回答