將點擊元素父項傳遞給函數

Question

所以我正在創建紙牌遊戲Dominion的Javascript版本。

我有這個函數需要一個數組來保存我用一些自定義對象創建的卡片對象。每個卡的一個對象。我創建了容納每張卡片（一個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

所以，你點擊+按鈕在卡上購買它，最終它會顯示出來你的手。單擊動作卡上的播放按鈕時發生該錯誤。

displayCard功能：

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=''; 
} 

任何幫助，將不勝感激。我一直在努力工作幾天，現在我完全被困住了。謝謝！

Answer 1

你現在的問題是你在click處理程序中引用了一個索引變量（i）。在事件監聽器的回調函數中，我仍然是從它聲明的循環中引用我的。所以它總是我最後一個值，它是4.這就是爲什麼你可以玩一張行動卡，只要它是最後一張牌在你手中。

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

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

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

一種解決方案就是把事件監聽器調用到另一個函數，它的變量作爲參數：

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

     playAction(playCard,parent); 

    }.bind(hand), false); 
} 

然後只是調用，在你的循環：

cardClick(playCard[i], parent[i], hand[i]);