在Click事件上使用Document Ready

时间:2014-04-24 03:53:17

标签: javascript jquery

我还是javascript的新手。

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

关于如何在我选择游戏时如何才能加载它们的任何想法? (我只使用一条路线,根据点击隐藏/显示所有信息)。

3 个答案:

答案 0 :(得分:4)

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>

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

答案 1 :(得分:2)

你的两个按钮和js定义的图像如下

function LetsRock(Playmate) {
    ....
}

<input type='button' value='cpu_vs_player' id='cpu_vs_player' onclick='javascript:LetsRock(this.id);' />
<input type='button' value='player_vs_player' id='player_vs_player' onclick='javascript:LetsRock(this.id);' />

答案 2 :(得分:1)

尝试使用带参数的函数(即0到cpu v / s播放器,1到播放器v / s播放器),然后从菜单页面发送到$(document).ready(function(){});