Question

我正在构建一个简单的战斗游戏，允许用户选择2个角色，让他们战斗，然后再与其他角色进行2回合。

我在游戏的各个阶段都在HTML中内置了具有唯一ID的不同按钮，例如“ PROCEED TO BATTLE”，“ FIGHT”和“ NEXT ENEMY”，随着脚本的进行，我的jQuery更改了其类分配根据需要"hide"或"show"。

我的问题是这样的：在新一轮中，当我返回“战斗”功能时（部分功能将隐藏我的“下一个敌人”按钮并再次显示“战斗”按钮），并为click分配一个监听器，影响HP / DP统计信息，该操作开始复杂并表现得好像按我的按钮会触发不断累积的侦听器。我可以肯定是这种情况，但可以通过验证。

所以我的问题是关于最佳做法的：不是根据游戏阶段隐藏/取消隐藏按钮元素，而是最好在Javascript中将这些元素定义为变量并创建/销毁它们，希望与绑定到它们的事件侦听器一起使用，以便一旦我返回，我将拥有动态HTML按钮和jQuery侦听器的新实例？

我可能会缺少关键术语，无法自行找到合适的解决方案，所以任何输入都可以帮助您！

示例：

假设我将此代码放入HTML中（即使这似乎是不好的做法）：

<div class="row bottom_aux" id="bottom_aux">
      <a class="btn btn-light hide" id="progress_button">PROGRESS BUTTON</a>
      <a class="btn btn-light hide" id="battle_button">BATTLE BUTTON</a>
      <a class="btn btn-light hide" id="next_battle_button">NEXT BATTLE</a>
</div>

使用hide类设置visibility设置为none或将display设置为hidden，我已经尝试了这两种方法。然后在我的jQuery中，用$(".battle_button").toggleClass(show)或$(".battle_button").addClass(show)调出按钮，但是我不会涉及为使它出现和消失而进行的CSS调整，我只是感兴趣它如何影响听众的行为。

然后我取消隐藏next_battle_button，然后将我的侦听器分配给它以执行我要设置的操作。

与...进行对比：

将我的按钮设置为javascript中的变量：

var $battle_button = "<a class='btn btn-light' id='battle_button'>BATTLE BUTTON</a>"
var $next_battle = "<a class='btn btn-light' id='next_battle_button'>NEXT BATTLE</a>"

然后，当我进入该阶段时，我会：

$("#battle_button").remove(); // REMOVE BATTLE BUTTON
$("#bottom_aux").html($next_battle); // ADD NEXT FOE BUTTON
$("#next_battle_button").on("click", function() {
       game.nextFoe();
});

希望插图有帮助！

jQuery按钮-隐藏/取消隐藏元素还是创建和销毁动态元素？

0 个答案: