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コードを1つの可能な実装で更新しましたhttp://jsbin.com/ijotok/8/

現在の実装にはいくつかの問題があります。そのうちの 1 つは、ページが読み込まれるとすぐにコードを実行し、入力値を提供した後は何もサフリングをトリガーしないことです。第二shuffleに、 は jQuery に組み込まれていません (それが を取得する理由です。Uncaught TypeError: Object [object Object] has no method 'shuffle'これが関数を追加した理由ですshuffleArray。必要に応じて、これを jQuery プラグインとして追加できます (このプラグイン<li>を確認してください)。第三に、 withのコンテンツにアクセスしています。 、しかし、入力.text()を呼び出す必要があります。.val()

私の実装を見て、質問があればお知らせください。

于 2013-05-14T19:57:59.837 に答える