0

私はまだjqueryに比較的慣れていないので、できる限り説明しようと思います。

カードファイトという人気のカードゲームをもとにコードを作っています!! ヴァンガード。私の目標は、編集可能なカードのデッキを作成して保存する方法を最終的に作成することです。

これまでのコードでは、ユーザーの入力をテキスト ボックスに取得し、ボタンがクリックされたときにそれを配列に格納し、jquery を使用してその要素を div に追加しました。

div に追加された要素がクリックされると (つまり、これはユーザーがテキスト ボックスに入力したカード名になります)、検索関数が呼び出され、そのカードに関するすべての情報と統計が返されます。以下にコードとコメントを含めて、各部分の機能を明確にしています。

私の現在の問題は....ユーザーがID出力のあるdivのどこかをクリックするたびに...検索機能が何度も呼び出されます。

意図された機能:

・ユーザーがカード名を入力 ・ユーザーが「検索」をクリック ・ID出力付きのdivにカード名が表示 ・ユーザーが表示されたカード名をクリック ・その下にカード情報が表示されます。例: グレード、パワー、シールドなど - ユーザーは別のカード名を入力し、上記の手順を繰り返します

現在何が起きているか: -ユーザーは ID 出力のある div のどこでもクリックでき、検索機能が呼び出され続けているかのように、カード情報が何度も表示され続けます。ユーザーがカード名をクリックしたときに、カード情報が一度だけ呼び出されるようにします。

理想的には、ユーザーがカード名をもう一度クリックすると、リストから消えるようにしたいのですが、これは理解できると思います。

私が知りたいもう1つのこと...これはかなり自由回答の質問です...ユーザーのすべての入力を配列に保存することは良い考えですか? 長期的には、カードの適切な情報が表示されたら...ユーザーが選択した場合...クリックして別のリストに保存できるチェックリストのようなものを作成できるようにしたいと思いますデッキを編集し続けることができます。

これが私のコードです：

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アタッチします。onclickspandiv

編集

にあるカード名ごとに、その特定のカードの名前と onclick 関数を含むdiv個別の要素が必要です。spanすべての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 に答える