用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添加輸入匹配隨機器？（編輯）