使用对象的javascript函数

Question

我正在设计一种游戏，其中有围绕六边形板的团队基地。 这个想法是，当单击一个团队基础时，该轮到该团队了。 我有：

    $('.team').click(function(){
        var teamID=$(this).attr('id');
        explore(teamID);
    });

然后，我使用teamID查找被单击的团队的索引，该索引作为json文件中的对象存储为对象，该文件具有teamname，score等属性。

    function explore(index){         // the game portion
        var turn=file[index];        // finds the team's info from json file
        $('.hex').click(function(){  // when a hex is clicked.... play the game
            alert(turn.teamname);       
            // game elements 
    }

这总是在第一次出现时起作用，但是，如果我单击其他团队框，然后单击一个十六进制，通常会认为这是我之前单击的框的转折。 我添加了警报（turn.teamname）以尝试调试。 如果我单击其他框，它将始终向第一个框发出警报，然后使用该不同框发送第二个警报。 我不知道为什么会有两个警报？ 因此它将始终警告“ team1”，然后警告“ team1”，“ team2”。 当我单击更多框时，它会一直保持警报状态，直到仅警告所有这些框。 另外，如果我之前单击了两个以上的框，即使我一直单击相同的十六进制，似乎在提醒我是“ team1”和“ team2”之间也交替出现。

这是我的第一个stackoverflow帖子，所以我希望这很有道理！ 谢谢！

Answer 1

出现此行为的原因是，您向dom元素添加了事件处理程序，但从未删除它们。 您需要更改十六进制点击的处理方式。 您可以使用http://api.jquery.com/one/将事件处理程序添加一次到包含所有十六进制的父元素，然后检查在事件处理程序中单击了哪个十六进制。 或者，您可以尝试更简单的解决方案，在该解决方案中，将事件侦听器一次添加到十六进制，然后检查是否有选定的团队：

var turn;
var teamSelected = false;
function explore(index){         // the game portion
    teamSelected = true;
    turn=file[index];        // finds the team's info from json file
}
$('.hex').click(function(){  // when a hex is clicked.... play the game
    if (teamSelected) {
        alert(turn.teamname);       
        // game elements 
        teamSelected = false;
    }
}

Answer 2

对于这样的事情，我建议您进入流星。 反应式编程模型比命令式编程模型干净得多（尤其是在游戏中它可能会很快变得复杂）。

我认为该示例说明了使用此框架可以非常快地完成的工作（最接近您的问题的示例）。

要深入了解，我建议您观看介绍视频 ，然后继续阅读文档和有关该视频的最新书籍 。