1

jquery を使用して次のことを行います。

  1. ユーザー入力を数回取得し、入力を div に追加します。
  2. ユーザーの各入力を 1 つの配列に格納して、保存できるようにします。
  3. 入力値が追加された div 内の入力をユーザーがクリックしたときに、入力値を (配列内の特定のインデックスで) JavaScript 関数 (検索) に渡すことができるようにします。

これまでの私のコードは次のとおりです。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type = "text/javascript" src='script.js'>
        </script>
        <title></title>
    </head>
    <body>
     <form name="searchForm">
         <input type="text" id="search" placeholder="Enter Card Name" name="searchItem"/>
     </form>
     <div id="button">Search!</div>
    <br/>
    <div id="output"></div>
    <div id="save"></div>
    </body>
</html>

Javascript:

function Vanguard(name,grade,skill,power,shield,critical, type, nation, clan, race){
    this.name = name;
    this.grade = grade;
    this.skill = skill;
    this.power = power;
    this.shield = shield;
    this.critical = critical;
    this.type = type;
    this.nation = nation;
    this.clan = clan;
    this.race = race;
};


var asurakaiser = new Vanguard("Asura Kaiser", 3, "Twin Drive!!", 11000, 0, 1, "Normal Unit", "Star Gate", "Nova Grappler", "Battleroid");
var kingofknightsalfred = new Vanguard("King of Knights, Alfred", 3, "Twin Drive!!", 10000, 0, 1, "Normal Unit", "United Sanctuary", "Royal Paladin", "Human");

var units = new Array(asurakaiser, kingofknightsalfred);

function printVanguard(p){
    document.getElementById('output').innerHTML +=("<hr />");
    document.getElementById('output').innerHTML +=("Name: " + p.name);    
    document.getElementById('output').innerHTML +=("<br />Grade: " + p.grade);
    document.getElementById('output').innerHTML +=("<br />Skill: " + p.skill);
    document.getElementById('output').innerHTML +=("<br />Power: " + p.power);
    document.getElementById('output').innerHTML +=("<br />Shield: " + p.shield);
    document.getElementById('output').innerHTML +=("<br />Critical: " + p.critical);
    document.getElementById('output').innerHTML +=("<br />Type: " + p.type);
    document.getElementById('output').innerHTML +=("<br />Nation: " + p.nation);
    document.getElementById('output').innerHTML +=("<br />Clan: " + p.clan);
    document.getElementById('output').innerHTML +=("<br />Race: " + p.race);
    document.getElementById('output').innerHTML +=("<br />");
};

var search = function(name){
  for (i = 0; i < units.length; i++){
    if (units[i].name === name) {
        printVanguard(units[i]);
    }
  }  
};


$(document).ready(function() {
 $('#button').click(function(){
  var output = $('input[name=searchItem]').val();
    $('#output').append("<br />" + '<div class="item2">' + output + '</div>'); 
    $('#output').click(function(){
     $('#save').append(search(output));
 }); 
 });

});

したがって、基本的にjquery部分を見てください...ユーザーがボタンをクリックすると、入力が変数「出力」に保存されます（振り返ってみると混乱するので、なぜその名前を選んだのかわかりません）。とにかく、次の行では、変数出力が div 出力に追加されます。また、ユーザーが div 内の出力自体をクリックすると、ユーザーの入力をパラメーターとして受け取る関数 (検索) が追加されます。

しかし、コードに何か問題があります...引用符なしで「Asura Kaiser」と入力すると、名前をクリックすると、search(「Asura Kaiser」) を呼び出す検索関数に基づいてすべての正しいデータが表示されます。しかし、この結果をクリックすると、同じデータが再び表示されます。「King of Knights Alfred」のように別の名前を引用符なしで入力しようとすると、「King of Knights Alfred」の結果に加えて「Asura Kaiser」の結果が表示されます。

基本的に、出力変数がデータか何かを蓄積しているように見えます。

ユーザーの各入力を配列の一意の要素に格納し、検索関数のパラメーターに入れるときにその特定の要素を呼び出すと、プログラムを正しく動作させることができるはずです。

どんな助けでも大歓迎です。明確にするために、私が探しているのは、非常に多くのユーザー入力を保存し、それらを配列内のインデックスに基づいて検索関数に一意のパラメーターとして渡すことができる方法です。

配列内のインデックスの search(output[i]) のようなもの。

このプログラムの全体的な目標は、人々がカードファイトと呼ばれる人気カードゲームのカード情報を検索できるようにすることです!! ヴァンガード。基本的には、カードを探してデッキを組むプログラムを作ることを目指しており、ここからが長いプロセスの始まりです。

読んでくれてありがとう！

4

3 に答える 3

1

ある時点で、サーバーにリモートで保存されたデータが必要になることを理解して、最初からやり直すことをお勧めします。リモート ストレージがないと、ユーザーが更新にアクセスする方法がありません。ウェブサイトのホストやクラウドなどを使用できます。

そうは言っても、JSON をデータ配信方法として使い始めたいと思うでしょう。質問で言及したすべてのことを実行し、時々サーバーと通信する場所をコメントで示す重要なデモを作成しました。

使用される JSON データの基本的な出発点は次のとおりです。

 [{
    "user_id": 1,/* will need an id system to store and retrieve data*/
        "name": "Asura Kaiser",
        "grade": 3,
        "skill": "Twin Drive!!",
        "power": 11000,
        /* some items removed for clarity but included in below demo link*/
}, {
    "user_id": 2,
        "name": "King of Knights, Alfred",
        "grade": 3,
        "skill": "Twin Drive!!",
        "power": 10000            
}]

デモでごくわずかな html を使用すると、このデータから多くのことができることがわかります。このデモでは、生データ構造からフォームも作成し、新しいユーザーを追加してページ内のマスター オブジェクトに保存することもできます。

数人のユーザーを追加することをお勧めします (フォームに名前を追加するだけです)。その後、データ表示で遊んで、少し検索します。名前検索でより多くの結果を得るために、名前にさまざまな文字を追加してみてください

コードの大部分は jQuery を使用して記述されています。同じことをすることをお勧めします。ネイティブ JavaScript を学ぶことは価値がありますが、jQuery を使用するとコード量を大幅に削減でき、ネイティブ JavaScript で同じことを行う方法を知らなくても非常に多くのことを実行できます。

デモ: http://jsfiddle.net/n3gfV/6/

コードには、何が起こっているのかについてのアイデアと理解を与えるのに役立つように、多くのコメントが付けられています

編集:ユーザー更新機能が制限された修正されたデモ。アプリにはすでにリファクタリングが必要ですが、アイデアを得るのに適したフレームが得られます

デモの更新: (他の機能が壊れていないことを確認するために十分にテストされていません) http://jsfiddle.net/n3gfV/7/

フォームには実際の html を使用することをお勧めします。簡単にするためにスクリプトを使用して作成しましたが、JavaScript はもう少し複雑になり、追加のコードがなくても簡単になる可能性があります

于 2013-01-27T18:38:34.813 に答える
0

ボタンがクリックされるたびに、新しいクリック イベントを追加する呼び出しが出力 div 全体に追加されます。さらに、クリック イベントを追加しても、以前に添付されたクリック イベントは削除されないようです。

追加する前に div "class='item2'" 要素を作成し、クリック ハンドラーを出力 div 全体ではなくその要素に割り当てることをお勧めします。

次に、コメントで指摘したように、詳細データを「保存」要素に追加したいようですが、printVanguard 関数を呼び出しています。これは何も返さず、代わりに #output div に直接書き込みます.

innerHTML を使用する代わりに、printVanguard を使用して HTML 文字列を構築し、それを返します。また、検索関数が printVanguard が返すものを返すことを確認してください。

于 2013-01-27T02:40:28.200 に答える
0

これにより、リファクタリングを開始できます。

function printVanguard(unit){

 document.getElementById('output').innerHTML +=("<hr />");

  for(var p in unit){

    document.getElementById('output').innerHTML +=('<br />' + p +': ' + unit[p] );
     };
     document.getElementById('output').innerHTML +=("<br />");
};
于 2013-01-27T02:43:49.553 に答える