0

我对 jquery 还比较陌生，所以我会尽力解释。

我正在根据一个名为 Cardfight 的流行纸牌游戏创建代码！先锋。我的目标是最终创建一种方法来构建和保存可以编辑的一副牌。

到目前为止，在我的代码中，我在文本框中获取用户的输入，单击按钮时将其存储到数组中，然后使用 jquery 将元素附加到 div。

当点击附加到 div 的元素时（即这将是用户在文本框中输入的卡片名称），将调用搜索函数并返回有关该卡片的所有信息和统计信息。我在下面包含了我的代码和注释，以明确它的每个部分的作用。

我当前的问题是.... 每当用户单击带有 ID 输出的 div 上的 ANYWHERE 时...搜索功能被一遍又一遍地调用。

预期功能：

- 用户输入卡名 - 用户点击“搜索” - 卡名显示在带有 ID 输出的 div 中 - 用户点击显示的卡名 - 卡信息显示在其下方。例如：等级、力量、盾牌等 - 用户输入另一个卡名，并重复上述步骤

目前发生了什么： -用户可以在带有ID输出的div上单击ANYWHERE，卡片信息将不断显示，就像搜索功能不断被调用一样。我希望在用户单击卡名时只调用一次卡信息。

理想情况下，我还想这样做，如果用户第二次点击卡片名称，它将从列表中消失，但我想我可以解决这个问题。

我想知道的另一件事......这是一个相当开放的问题......将所有用户的输入保存到数组中是个好主意吗？从长远来看，我希望能够创建一种类似于清单的清单，一旦显示卡的正确信息...如果用户选择...他们可以单击它并将其保存到单独的列表中他们可以继续编辑他们的牌组。

这是我的代码：

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/Jquery：

// Vanguard object to obtain statistics of each card.
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;
};

// This is where I can create and store new Vanguard objects easily
// I've only included 5 here for testing but there are hundreds 
// that I will include once I get the code working.
var database = {};
database['Asura Kaiser'] = new Vanguard("Asura Kaiser", 3, "Twin Drive!!", 11000, 0, 1, "Normal Unit", "Star Gate", "Nova Grappler", "Battleroid");
database['King of Knights, Alfred'] = new Vanguard("King of Knights, Alfred", 3, "Twin Drive!!", 10000, 0, 1, "Normal Unit", "United Sanctuary", "Royal Paladin", "Human");
database['Dragonic Overlord'] = new Vanguard("Dragonic Overlord", 3, "Twin Drive!!", 11000, 0, 1, "Normal Unit", "Dragon Sanctuary", "Kagerou", "Dragon");
database['CEO Amaterasu'] = new Vanguard("CEO Amaterasu", 3, "Twin Drive", 10000, 0, 1, "Normal Unit", "United Sanctuary", "Oracle Think Tank", "Human");
database['Alfred - Early'] = new Vanguard("Alfred - Early", 3, "Twin Drive!!", 10000, 0, 1, "Normal Unit", "United Sanctuary", "Royal Paladin", "Human");

// This is code to display all the card information to the user
// I am not sure why I need two parameters but 
// I couldn't get the code to work any other way.
function printVanguard(p, name){
    document.getElementById('output').innerHTML +=("<hr />");
    for (var p in database[name]){
       document.getElementById('output').innerHTML +=(p +': ' + database[name][p] + '<br />');
       }
       document.getElementById('output').innerHTML +=("<br />");
};

// This calls the printVanguard function for a specific card
var search = function(p, name){
    printVanguard(p, name);
};

// Jquery which is supposed to get the name of the card from the user.
// When the user clicks a button, it will store the name in an array.
// Then after it will append the input to a div for the user to see.
// If the user clicks on the input appended to the div,
// it will display all the statistics about that card.
$(document).ready(function() {
 var userInput = [];
 $('#button').click(function(){
  userInput.push($('input[name=searchItem]').val());
    for (i = 0; i < userInput.length; i++){
        if (i === userInput.length - 1){
            $('#output').append("<br />"  + userInput[i]); 
        }
    }
 $('#output, userInput').unbind("click").click(function(){
 for (i = 0; i < userInput.length; i++){
        if (i === userInput.length - 1){
            $('#save').append(search(userInput[i], userInput[i]));
        }
    }
 }); 
 });
});

如果你需要的话，还有 CSS ......（不是很漂亮，但不是我现在的首要任务）

form {
    display: inline-block;
}

#button{
    display: inline-block;
    height: 20px;
    width: 70px;
    background-color:#FF8C00;
    font-family:cursive, arial;
    font-weight:bold;
    color: #8B0000;
    border-radius:5px;
    text-align:center;
    margin-top:2px;
}

.list {
    font-family:garamond;
    color:#006400;
}

#output {
    font-family:garamond;
    color:#006400;
}

感谢您的帮助...我尽力使代码尽可能简洁。如果您认为我可以改进它，请告诉我！:)

4

1 回答 1

2

在div元素中，创建span包含卡片名称的元素。将onclick处理程序附加到所有span元素而不是div元素。

编辑

对于您在 中的每个卡片名称div，您应该有一个单独的span元素，其中包含该特定卡片的名称和 onclick 函数。假设您的所有span元素也有一个名为cardName. 所以你的代码应该是这样的......

$('span.cardName').on('click', function(e) {
    var cardName = e.currentTarget.innerHTML; // Assuming you have nothing else within the span besides the card name

    // Insert whatever code here
}
于 2013-01-31T16:40:01.047 回答