用JS/jQuery添加輸入匹配隨機器？ V.2

我想做一個基本的隨機數發生器，可以匹配的東西。有點像日期（浪漫）選擇器，但情況不同。用JS/jQuery添加輸入匹配隨機器？ V.2

我想要的產品看起來像這樣：

（用戶輸入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

這就是我所擁有的。

我希望輸入隨機化，但它不起作用。

來源

2013-05-14 NinjaStarz7

我會提供一個賞金，如果我可以xP – NinjaStarz7

使用一些代碼從這些帖子：

我有一個可能的實現更新您的JSBin代碼http://jsbin.com/ijotok/8/

您現在實現了幾個問題與它，其中之一是臨屋區只要頁面加載完成，您就會執行代碼，一旦您提供了輸入值，則不會觸發該頁面。其次shuffle沒有內置到jQuery中（這就是爲什麼你得到Uncaught TypeError: Object [object Object] has no method 'shuffle'，這就是爲什麼我添加了shuffleArray函數。如果需要，可以將其添加爲jQuery插件（請查看this plugin）。第三，您正在使用.text()訪問<li>的內容，但您應該在輸入上調用.val()。

看看我的實施，讓我知道你是否有問題。

來源

2013-05-14 19:57:59

用JS/jQuery添加輸入匹配隨機器？ V.2

回答

相關問題