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 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><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/6/edit

这就是我所拥有的。

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

4

1 回答 1

0

使用这些帖子中的一些代码：

我用一种可能的实现方式更新了您的 JSBin 代码http://jsbin.com/itok/8/

您当前的实现有几个问题，其中一个是您在页面加载后立即执行代码，一旦您提供了输入值，就没有任何事情会触发 suffling。其次shuffle不是内置在 jQuery 中（这就是你得到的原因Uncaught TypeError: Object [object Object] has no method 'shuffle'，这就是我添加该shuffleArray功能的原因。如果需要，你可以将其添加为 jQuery 插件（查看这个插件）。第三，你正在访问<li>with的内容.text()，但您应该调用.val()输入。

看看我的实现，如果您有任何问题，请告诉我。

于 2013-05-14T19:57:59.837 回答