2014-04-06 42 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事件。