Question

我正在尝试创建一个游戏，其中用户有4张图片可供选择，一旦选择了一个角色，其他3个图像被推送到新的部分，然后用户选择要战斗的角色。接下来应该发生的是，一旦从敌人选择区域中选择了该角色，它就会被推到一个新区域，在那里它将与所选择的原始角色作战。

目前，我可以获得敌人的角色选择和临时区域以进行战斗。然而，似乎一旦敌人被选中，它就会打破整个事物并将所有角色推向敌人的临时区域，我无法弄清楚如何使其工作所以一旦敌人进入临时区域，那么它就会能够被选中然后被推到战斗区域。感谢您的帮助，这是迄今为止我所拥有的：

$(document).ready(function(){

var char ="";
isChosen = false;
ifattacker = false;

$（“。defender”）。click（function（）{//试图弄清楚如何选择一个角色

    if (isChosen) return;

    ($(".frodo").on("click",function(){
        $(".gandalf").appendTo(".enemy-select1");
        $(".balrog").appendTo(".enemy-select2").addClass("attacker");
        $(".sauron").appendTo(".enemy-select3").addClass("attacker");
    }));

    ($(".gandalf").on("click",function(){
        $(".frodo").appendTo(".enemy-select1");
        $(".balrog").appendTo(".enemy-select2");
        $(".sauron").appendTo(".enemy-select3");
    }));

    ($(".balrog").on("click",function(){
        $(".frodo").appendTo(".enemy-select1");
        $(".gandalf").appendTo(".enemy-select2");
        $(".sauron").appendTo(".enemy-select3");
    }));

    ($(".sauron").on("click",function(){
        $(".frodo").appendTo(".enemy-select1");
        $(".gandalf").appendTo(".enemy-select2");
        $(".balrog").appendTo(".enemy-select3");
    }));

}); // end characters click

$("attacker").click(function(){

isChosen = true;

($(".gandalf").on("click",function(){
        $(".gandalf").appendTo(".attack")
    }));

});


}); // end document ready

Answer 1

我注意到两件事，其中一件我认为是问题的根本原因，另一件是简单的语法错误。

1。点击.defender时，您将点击事件绑定到Gandalf。单击.attacker后，您将另一个事件绑定到Gandalf。这不会替换原始事件，它会添加，因此单击Gandalf将重新触发初始事件。您可能希望做的是：

$(".attacker").click(function(){

    isChosen = true;
    //Unbind the previous click event using .off() before binding new event
    $(".gandalf").off().on("click",function(){
        $(".gandalf").appendTo(".attack")
    });

});

2。在上面的代码段中，我向.选择器添加了attacker，因为我认为您希望将其绑定到攻击者类的点击。应该是$(".attacker")。

在第一次appendTo（）完成后，尝试使用appendTo（）将潜水推送到页面的一部分。

1 个答案: