0

私はカードゲームのドミニオンの Javascript バージョンの作成に取り組んでいます。

カスタムオブジェクトで作成したカードオブジェクトを保持する配列を受け取るこの関数があります。カードごとに 1 つのオブジェクト。各カード (div) を保持するコンテナーを作成し、画像オブジェクトを作成してから、ユーザーがクリックしてカードを再生するボタン (アクション カードの場合) を作成します。

これが私が問題を抱え始めるところです。ボタンに onclick 関数を追加します。私はカード オブジェクトを渡したい (それを再生するときに破棄配列に送信できるようにするため)、ボタンの親 (特定のカードを保持する div である必要があります) を playAction() 関数に送信したいと考えています。 (つまり、基本的に私の onclick 関数は別の関数を呼び出すだけです)。playCard[i] が定義されていないというエラーが表示されます。また、onclick 関数の外部で定義しようとしましたが、うまくいきませんでした。

私がここにいる場所のライブ バージョンを表示できます: http://people.rit.edu/lxl1500/Prog4/Project%202/project1.html

Javascript: http://people.rit.edu/lxl1500/Prog4/Project%202/main-script.js

カードの + ボタンをクリックして購入すると、最終的に手札に表示されます。アクション カードの再生ボタンをクリックすると、エラーが発生します。

ディスプレイカード機能:

function displayHand(hand){

var parent = Array();
var container = Array();
var card = Array(); 
var playCard = Array();

for(var i=0; i < hand.length; i++){


    container[i] = document.createElement('div');
    container[i].setAttribute('class','singleHandCard');
    var cardIndex = container[i].setAttribute('id', 'card'+i);
    document.getElementById('game-hand').appendChild(container[i]);

    //create each card in our hand

    card[i] = new Image();
    card[i].src = hand[i].image;

    //create play card item

    playCard[i] = new Image();
    playCard[i].setAttribute('class', 'playbtn')
    playCard[i].src = 'images/play-btn.png';
    playCard[i].style.visibility = 'hidden';
    if(hand[i].type == "action"){
        playCard[i].style.visibility = 'visible';
    }
    container[i].appendChild(playCard[i]);



    parent[i] = card[i].parentNode;

    playCard[i].addEventListener('click', function() {

        playAction(playCard[i],parent[i]);

    }.bind(hand[i]), false);

    container[i].appendChild(card[i]);
  }

}

playAction 関数:

function playAction(actionCard,parent){
    discard.push(actionCard);
    parent.innerHTML='';
}

どんな助けでも大歓迎です。私はこれを数日間解決しようとしてきましたが、完全に困惑しています。ありがとう！

4

1 に答える 1

0

問題は、クリックハンドラー内でインデックス変数（i）を参照していることです。イベントリスナーのコールバックでは、iはまだ宣言されたループからiを参照しています。したがって、これは常に最後の値、つまり4になります。これが、アクションカードである限りアクションカードを再生できる理由です。あなたの手札の最後のカード。

playCard[i].addEventListener('click', function() {

    playAction(playCard[i],parent[i]);
    console.log(i); //Always 4

}.bind(hand[i]), false);

1つの解決策は、イベントリスナー呼び出しを、変数を引数として取る別の関数に配置することです。

function cardClick(playCard, parent, hand) {
    playCard.addEventListener('click', function() {

        playAction(playCard,parent);

    }.bind(hand), false);
}

そして、それをループで呼び出します。

cardClick(playCard[i], parent[i], hand[i]);
于 2013-02-13T04:53:47.853 に答える