javascript - 在单击事件上使用文档就绪

Question

我对 JavaScript 还很陌生。

我有一个应用程序，页面上有两个按钮。一个是显示一场游戏的 cpu_vs_player 按钮，另一个是显示另一场游戏的player_vs_player 按钮。问题是所有代码都位于一个 application.js 文件中。如果我要玩 cpu_vs_player，则无需在 $(document).ready(function(){}); 上加载player_vs_player。

关于如何让它们仅在我选择该游戏时加载有什么想法吗？ (我只使用一条路线，所有信息都根据点击隐藏/显示)。

Answer 1

document.ready 只不过是页面呈现后的那一刻，并且文档需要用事件监听器填充。坦率地说，剥这只猫的皮有多种方法。

您可以使用 jQuery 方式将 javascript 和 HTML 分开:

<button id="button1">cpu_vs_player</button>
<button id="button2">player_vs_player</button>

对于 JavaScript:

假设每个游戏都有一个函数:

function cpu_vs_player() {
   // start the game
}

function player_vs_player() {
   // need another player
}

以 jQuery 方式添加事件监听器:

$(document).ready(function() {
   $("#button1").click(function() {
      cpu_vs_player();
   });

   $("#button1").click(function() {
      player_vs_player();
   });

});

或者您可以使用@Techstone向您展示的方法，尽管您可以更直接地进行。但这一切都有效。

<button onclick="javascript:cpu_vs_player();">cpu_vs_player</button>
<button onclick="javascript:player_vs_player();">player_vs_player</button>

<小时/>

添加您可以应用的另一个选项

在 JavaScript 中:

var Main = {

    cpu_vs_player: function() {
        alert("start cpu_vs_player");
    },
    player_vs_player: function() {
        alert("start player_vs_player");
    }
}

在 HTML 中:

<button onclick="javascript:Main.cpu_vs_player();">cpu_vs_player</button>
<button onclick="javascript:Main.player_vs_player();">player_vs_player</button>

是的，还有更多......;-)