我想使用 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 部分......如果你注意到,当用户点击按钮时,它会将输入保存到变量“输出”(我不知道为什么我选择了这个名字,因为回想起来听起来很混乱)。但无论如何,在后面的行中,变量 output 将附加到 div 输出。如果用户在 div 中单击输出本身,它将附加一个函数(搜索),该函数将用户的输入作为参数。
但是我的代码有问题......因为如果我输入“Asura Kaiser”而不带引号,单击名称,它将根据调用 search(“Asura Kaiser”) 的搜索功能显示所有正确的数据。但是当我点击这个结果时,它再次显示相同的数据。如果我尝试输入不带引号的“King of Knights, Alfred”等其他名称,除了“King of Knights, Alfred”的结果外,它仍会显示“Asura Kaiser”的结果。
基本上,似乎正在发生的是我的输出变量正在累积数据或其他东西。
我认为,如果我将每个用户的输入存储在数组的唯一元素中,并在将其放入搜索功能的参数中时调用该特定元素,我应该能够让我的程序正常工作。
任何帮助,将不胜感激。澄清一下,我正在寻找的是一种存储大量用户输入并能够根据它们在数组中的索引将它们作为唯一参数传递给搜索函数的方法。
对于数组中的某些索引,类似 search(output[i]) 的东西。
该程序的总体目标是让人们可以搜索名为 Cardfight 的流行纸牌游戏的纸牌信息!先锋。我的主要目标是创建一个程序,让您可以查找卡片并制作一副牌,这是这个漫长过程的开始。
谢谢阅读!