用JS/jQuery添加输入匹配随机器？（编辑）

我想做一个基本的随机数发生器，可以匹配的东西。有点像日期（浪漫）选择器，但情况不同。用JS/jQuery添加输入匹配随机器？（编辑）

我想要的产品看起来像这样：

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

这就是我所拥有的。

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

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

来源

2013-05-13 NinjaStarz7

请说明什么您已经尝试过（包括代码），这是规则要求的。 – likeitlikeit 2013-05-13 19:05:13

什么是不工作？你刚刚从这个问题中复制了jsbin代码：http://stackoverflow.com/questions/8225582/randomize-a-unordered-list - 除了这个之外你还试过了什么？ – Joe 2013-05-13 19:40:56

我正试图改变事情发生的地方。列表中的数字是输入字段。 – NinjaStarz7 2013-05-13 19:59:29

与此标记：注意：添加的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'); 
});

工作例如：3210

编辑：最后一部分的更为简洁的版本：洗牌保持不变

$(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-13 20:18:53

谢谢！但是，如果我使用这个输入而不是数字，这将如何工作？里面有一个/ li''里面的 – NinjaStarz7 2013-05-13 20:48:29

？ '$（本）.find（ '输入'）。VAL（）'？不是你原来的问题。 – 2013-05-13 20:50:48

我希望任何人能够在不更改代码的情况下使用它。 – NinjaStarz7 2013-05-13 20:53:54

您的随机化方法阵列没有优化，并且不会工作。

看到我的修正来解决自己的错误：

$(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-13 19:53:59 DiGui

随机化工作正常。 – NinjaStarz7 2013-05-13 19:59:50

用JS/jQuery添加输入匹配随机器？ （编辑）

回答

相关问题

用JS/jQuery添加输入匹配随机器？（编辑）