1

我想使用 jquery 来：

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

但是我的代码有问题......因为如果我输入“Asura Kaiser”而不带引号，单击名称，它将根据调用 search(“Asura Kaiser”) 的搜索功能显示所有正确的数据。但是当我点击这个结果时，它再次显示相同的数据。如果我尝试输入不带引号的“King of Knights, Alfred”等其他名称，除了“King of Knights, Alfred”的结果外，它仍会显示“Asura Kaiser”的结果。

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

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

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

对于数组中的某些索引，类似 search(output[i]) 的东西。

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

谢谢阅读！

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

这将使您开始进行重构。

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 回答
0

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

我建议在添加 div "class='item2'" 元素之前创建它，并将点击处理程序分配给该元素而不是整个输出 div。

接下来，正如我在评论中指出的那样，您似乎想要将详细数据添加到“保存”元素，但您正在调用 printVanguard 函数，该函数不返回任何内容，而是直接写入 #output div .

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

于 2013-01-27T02:40:28.200 回答