Question

我想使用jquery：

多次获取用户输入并将输入附加到div。
将每个用户的输入存储在一个阵列中，以便我可以保存它们。
当用户点击附加到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部分...如果你注意到，当用户点击按钮时，它会将输入保存到变量＆＃34;输出＆＃34; （我不知道为什么我选择这个名字，因为回头看起来很混乱）。但无论如何，在后面的行中，变量输出将附加到div输出。如果用户在div中单击输出本身，它将附加一个以用户输入为参数的函数（搜索）。

但我的代码有问题...因为如果我进入＆＃34; Asura Kaiser＆＃34;如果没有引号，点击名称，它将根据搜索功能显示所有正确的数据（＆＃34; Asura Kaiser＆＃34;）。但是当我点击这个结果时，它再次显示相同的数据。如果我尝试输入一个不同的名字，如＆＃34;骑士之王，阿尔弗雷德＆＃34;如果没有引号，它仍会显示＆＃34; Asura Kaiser＆＃34;除了骑士之王，阿尔弗雷德＆＃34;的结果之外。

基本上，似乎正在发生的事情是我的输出变量正在累积数据或其他东西。

我认为，如果我将每个用户的输入存储在一个数组的唯一元素中，并在我将其放入搜索功能的参数时调用该特定元素，我应该能够让我的程序正常工作。

任何帮助将不胜感激。为了澄清，我正在寻找的是一种存储很多用户输入的方法，并且能够根据它们在数组中的索引将它们作为唯一参数传递给搜索功能。

类似于数组中某些索引的搜索（output [i]）。

此计划的总体目标是让人们可以搜索名为Cardfight的流行纸牌游戏的卡信息！先锋。我基本上打算创建一个程序，让你可以查看卡片并制作套牌，这是这个漫长过程的开始。

感谢阅读！

Answer 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中做同样的事情

DEMO：http://jsfiddle.net/n3gfV/6/

代码被大量评论，以帮助您了解和理解正在发生的事情

编辑：具有有限用户更新功能的修改演示。应用程序已经需要进行一些重构，但会为您提供良好的框架来获取

的想法

更新演示:(未经过全面测试以确保其他功能未被破坏）http://jsfiddle.net/n3gfV/7/

建议您使用真正的html表单。我使用脚本创建它们以方便我，但是使javascript更复杂，并且在没有附加代码的情况下更容易为您提供

Answer 2

每次单击该按钮时，添加新点击事件的调用都会添加到整个输出div中。此外，添加点击事件似乎不会删除以前附加的点击事件。

我建议您创建div＆＃34; class =＆＃39; item2＆＃39;＆＃34;在附加它之前的元素，并将单击处理程序分配给该元素而不是整个输出div。

接下来，正如我在评论中指出的那样，您似乎想要将详细数据添加到＆＃34; save＆＃34; element，但是你正在调用printVanguard函数，它不会返回任何内容，而是直接写入#output div。

使用printVanguard构建HTML字符串并返回它而不是使用innerHTML。还要确保您的搜索功能返回printVanguard返回的内容。

Answer 3

这将让你开始重新分解。

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 />");
};

如何使用jquery和/或javascript获取多个用户输入并将其存储在数组中，然后访问数组中的元素

3 个答案: