个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 02:28:28 25 4
gpt4 key购买 nike

我想使用 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"的搜索函数显示所有正确的数据)。但当我点击这个结果时，它再次显示相同的数据。如果我尝试输入不同的名称，例如不带引号的“骑士之王，阿尔弗雷德”，除了“骑士之王，阿尔弗雷德”的结果之外，它仍然会显示“阿修罗凯撒”的结果。

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

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

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

类似 search(output[i]) 来查找数组中的某个索引。

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

感谢您的阅读!

最佳答案

我建议您重新开始了解，在某些时候您将需要远程存储在服务器上的数据。如果没有远程存储，用户就无法访问更新。您可以使用网站主机或云或其他任何东西。

话虽如此，您可能希望开始使用 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 编写的。我建议你这样做。学习 native javascript 很有值(value)，但是您可以使用 jQuery 显着减少代码量，并且可以在不知道如何在 native javascript 中做同样的事情的情况下做很多事情

演示:http://jsfiddle.net/n3gfV/6/

代码带有大量注释，可帮助您提供想法并理解正在发生的事情

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

更新演示:(未经过充分测试以确保其他功能未损坏)http://jsfiddle.net/n3gfV/7/

建议您使用真正的 html 表单。我用脚本创建它们是为了让我更容易，但是使 javascript 变得更复杂一点，并且在没有额外代码的情况下可能对您来说更容易

关于javascript - 如何使用 jquery 和/或 javascript 获取多个用户输入并将其存储在数组中，然后访问数组中的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14543681/

25 4 0
文章推荐： html - 如何对齐具有特定宽度的文本框和标签
文章推荐： c++ - 在头文件中使用模板
文章推荐： javascript - 使用绝对定位将一个 div 定位在另一个 div 附近
文章推荐： c++ - 对象的动态内存和赋值运算符重载
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com