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

这就是我所拥有的。

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

Answer 1

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

我使用一个可能的实现http://jsbin.com/ijotok/8/

更新了您的JSBin代码

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

看看我的实施情况，如果您有任何疑问，请告诉我。

使用JS / jQuery添加输入match-randomizer？ V.2

1 个答案: