Question

我对jquery仍然比较新，所以我会尽力解释。

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

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

当单击附加到div的元素时（即，这将是用户在文本框中输入的卡名称），将调用搜索功能并返回有关该卡的所有信息和统计信息。我已经在下面添加了我的代码和评论，以明确其中每个部分的作用。

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

预期功能：

- 用户输入卡名称 - 用户点击＆＃34;搜索＆＃34; -Card名称显示在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;
}

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

Answer 1

在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
}

尝试在单击事件中创建单击事件但未获得所需结果

1 个答案: