클릭 이벤트에서 문서 준비 사용

Question

저는 아직 자바 스크립트를 처음 사용합니다.

페이지에 두 개의 버튼이있는 응용 프로그램이 있습니다. 하나는 하나의 게임을 표시하는 cpu_vs_player 버튼이고 다른 하나는 다른 게임을 표시하는 player_vs_player 버튼입니다. 문제는 모든 코드가 하나의 application.js 파일에 있다는 것입니다. cpu_vs_player를 재생하려면 $(document).ready(function(){});에 player_vs_player를로드 할 필요가 없습니다.

내가 게임을 선택한 경우에만로드 할 수있는 방법에 대한 아이디어가 있습니까? (나는 모든 정보가 숨겨져 있거나 클릭에 기반하여 표시되는 경로 하나만 사용하고 있습니다.)

Answer 1

document.ready는 페이지가 렌더링 된 후 문서가 이벤트 리스너로 채워 져야 할 때입니다. 솔직히이 고양이를 가죽 벗기는 여러 방법이 있습니다.

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

을 그리고 자바 스크립트 :

가정하면 각 게임 플레이하는 기능이 있습니다

function cpu_vs_player() { 
    // start the game 
} 

function player_vs_player() { 
    // need another player 
} 

을

당신이 중 하나의 jQuery 방법을 당신은 자바 스크립트와 HTML 분할 유지할 수있는 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> 

---

당신이 자바 스크립트에서

을 적용 할 수있는 다른 옵션을 추가 :

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> 

을 그리고 네, 더있다 ... ;-)

Answer 2

봅니다 (1 플레이어 V/s의 플레이어, 즉 0의 CPU V/s의 플레이어) 매개 변수 기능을 사용하고 $(document).ready(function(){});

Answer 3

이미지 메뉴 페이지에서 보낼 당신의 두 개의 버튼과 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);' />