2014-04-06 2 views
0

왜 작동하지 않는지 확신 할 수 없기 때문에 여러분 중에 내 코드를 살펴볼 수 있습니까?JavaScript - 출력 없음

내 현재 상황은 라디오 버튼을 체크하면 출력을 표시합니다. 예를 들어 "당신은 표 A를 선택했습니다".

불행히도 내 경우에는 라디오 버튼을 클릭했을 때 아무 것도하지 않았습니다.

JavaScript 기능이 어쩌면 변위 된 것 같습니다. 그러나 나는 거기에 아무 것도 보이지 않는다.

<!DOC HTML> 
<html> 
<TITLE></TITLE> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 
    1.4.2.min.css"> 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src ="jquery-1.11.0.min.js"></script> 
    <script src="jquery.cycle.all.js"></script> 
    <script type="text/javascript"> 
     $('input[type="radio"]').click(function() { 
      $('.frame-wrapper').eq($(this).index() -1).fadeIn(); 
     }); 
    </script> 
    <style type="text/css"> 
     .frame-wrapper { 
      display: none; 
      float: left; 
      width: 32%; 
      margin-top: 20px; 
      margin-right: 1%; 
      background-color: #eee; 
     } 
    </style> 
</head> 
<body> 
    <b>Please select an option</b> 
    A <input type="radio" name="Option" /> 
    B <input type="radio" name="Option" /> 
    C <input type="radio" name="Option" /> 

    <div style="clear: both;"></div> 

    <div id="tblA" class="frame-wrapper"> 
     You selected A, table tblA is shown 

     <frame src="http://www.huawei.com" /> 
    </div> 

    <div id="tblB" class="frame-wrapper"> 
     You selected B, table tblB is shown 

     <frame src="https://www.google.com/" /> 
    </div> 

    <div id="tblC" class="frame-wrapper"> 
     You selected C, table tblC is shown 
    </div> 

</body> 
</html> 
+1

매우 이상한 점은 세 가지 jQuery 버전을로드한다는 것입니다. 존재하기 전에'input' 요소를 찾으려고합니다. jQuery 튜토리얼을 읽고 기초를 먼저 배우십시오. http://learn.jquery.com/about-jquery/how-jquery-works/, http://learn.jquery.com/jquery-mobile/getting-started/ –

답변

0

DOM을 적용하기 전에 스크립트가 실행됩니다. 스크립트 태그를 맨 아래로 이동하거나 onload 함수로 줄 바꿈하십시오. 초기 선택기의 결과를 console.log로 테스트하십시오.

console.log ($ ('input [type = "radio"]')));

http://api.jquery.com/ready/

+0

많은 사람들이 ... 좋은 일요일 보내십시오! – user3500105

1

당신은 내 코드를 삽입해야합니다 또한

$(document).ready(function(){ 
    //... 
}); 

, 하나 개 이상의 jQuery 소스 파일을 사용하는, 당신은 단지 하나를 사용해야합니다. ready 이벤트에 대해 자세히 알아보십시오.