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

我想使用jquery来：

多次获取用户输入并将输入附加到div

将每个用户输入存储在单个数组中，以便我可以保存它们

当用户单击附加到的div中的输入时，能够将输入值（在数组中的特定索引处）传递给javascript函数（搜索）

以下是我目前的代码：

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

});

功能先锋（姓名、等级、技能、力量、盾牌、暴击、类型、国家、氏族、种族）{
this.name=名称；
这个。等级=等级；
这个技能=技能；
这个。力量=力量；
this.shield=屏蔽；
这个.关键的=关键的；
this.type=type；
这个国家=国家；
这个氏族=氏族；
这个种族=种族；
};
var asurakaiser=新先锋（“Asura Kaiser”，3，“双驱！！”，11000，0，1，“普通单位”，“星门”，“新星抓斗”，“战列机器人”）；
var Kingof Knights salfred=新先锋（“骑士之王，阿尔弗雷德”，3，“双车道！！”，10000，0，1，“普通单位”，“联合圣殿”，“皇家圣骑士”，“人类”）；
var单位=新阵列（asurakaiser，骑士萨尔弗雷德之王）；
功能printVanguard（p）{
document.getElementById（'output'）.innerHTML+=（“
”）；
document.getElementById（'output'）.innerHTML+=（“名称：”+p.Name）；
document.getElementById（'output'）.innerHTML+=（“
等级：”+p.Grade）；
document.getElementById（'output'）.innerHTML+=（“
技能：”+p.Skill）；
document.getElementById（'output'）.innerHTML+=（“
Power:”+p.Power）；
document.getElementById（'output'）.innerHTML+=（“
屏蔽：”+p.Shield）；
document.getElementById（'output'）.innerHTML+=（“
临界：”+p.Critical）；
document.getElementById（'output'）.innerHTML+=（“
类型：”+p.Type）；
document.getElementById（'output'）.innerHTML+=（“
国家：”+p.Nation）；
document.getElementById（'output'）.innerHTML+=（“
Clan:”+p.Clan）；
document.getElementById（'output'）.innerHTML+=（“
种族：”+p.Race）；
document.getElementById（'output'）.innerHTML+=（“
”）；
};
var search=函数（名称）{
对于（i=0；i”+“”+output+”）；
$（“#输出”）。单击（函数（）{
$（'#save'）。追加（搜索（输出））；
}); 
});
});

所以基本上看一下jquery部分。。。如果您注意到，当用户单击按钮时，它会将输入保存到变量“output”（我不知道为什么选择这个名称，因为回头看它听起来很混乱）。但是无论如何，在后面的行中，变量输出将附加到div输出。如果用户单击div中的输出本身，它将附加一个函数（search），该函数将用户的输入作为参数

但是我的代码有点问题。。。因为如果我输入“Asura Kaiser”而不加引号，单击名称，它将根据调用搜索（“Asura Kaiser”）的搜索函数显示所有正确的数据。但当我点击这个结果时，它再次显示相同的数据。如果我尝试输入一个不同的名称，如“骑士之王，阿尔弗雷德”，而不加引号，它仍然会显示“阿修拉·凯撒”的结果以及“骑士之王，阿尔弗雷德”的结果

基本上，我的输出变量正在积累数据或其他东西

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

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

类似于搜索（输出[i]）数组中的某个索引

这个程序的总体目标是让人们可以搜索一款名为Cardfight的流行纸牌游戏的纸牌信息！！先锋队。我的主要目标是创建一个程序，允许你查找卡片并制作一副牌，这是这个漫长过程的开始

---

谢谢你的阅读

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

我建议在附加div“class='item2'”元素之前创建它，并将click处理程序分配给该元素，而不是整个output div

接下来，正如我在一篇评论中所指出的，您似乎希望将细节数据添加到“save”元素，但您正在调用printVanguard函数，该函数不返回任何内容，而是直接写入#output div

---

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

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

我建议在附加div“class='item2'”元素之前创建它，并将click处理程序分配给该元素，而不是整个output div

接下来，正如我在一篇评论中所指出的，您似乎希望将细节数据添加到“save”元素，但您正在调用printVanguard函数，该函数不返回任何内容，而是直接写入#output div

使用

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

});

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

 [{
    "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            
}]