1

我尝试在 jsfiddle.net 中运行它并且工作正常。http://jsfiddle.net/AdTK3/

HTML

<input name="rdoNationality" class="rdoNationality" type="radio" checked="checked" value="nationalityAny" /> Div 1
<input name="rdoNationality" class="rdoNationality" type="radio" value="nationalitySelect" /> Div 2 

<div id="nationalityAny">
 Div 1 Selected
</div>
<div id="nationalitySelect" style="display:none;">
  Div 2 Selected
</div>

jQuery

$(function(){
    $(".rdoNationality").on("click", function(){
            var valNationality = $(this).val(),
            divNationality = $("#" + valNationality);

            $("div").hide();
                divNationality.show();
        });
});

但是当我在我的页面上尝试它时它不起作用（注意：我确定我的 jQuery 路径是正确的）。这是我的完整 HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title Here</title>
<meta name="keywords" content="kw here" />
<meta name="content-language" content="en" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(function(){
    $(".rdoNationality").on("click", function(){
            var valNationality = $(this).val(),
            divNationality = $("#" + valNationality);

            $("div").hide();
                divNationality.show();
        });
});

</script>
</head>
<body style="background:#fff;">
<div>
        <input name="rdoNationality" class="rdoNationality" type="radio" checked="checked" value="nationalityAny" /> Div 1
        <input name="rdoNationality" class="rdoNationality" type="radio" value="nationalitySelect" /> Div 2 

        <div id="nationalityAny">
            Div 1 Selected
        </div>
        <div id="nationalitySelect" style="display:none;">
           Div 2 Selected
        </div>
</div>
</body>
</html>

我的代码有什么问题。谢谢。

4

3 回答 3

0

问题是因为选择器$("div").hide();，这将隐藏文档中的所有 div。

于 2013-09-12T07:17:29.627 回答
0

最好添加在线 jQuery CDN 版本，例如

<script type="text/javascript" 
         src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

更改是收音机和复选框的更好事件。所以试试这样

$(function(){
    $(".rdoNationality").on("change", function(){
            var valNationality = $(this).val(),
            divNationality = $("#" + valNationality);

            $("div").hide();
                divNationality.show();
        });
});

检查这个原始的 JSfiddle

于 2013-09-12T06:11:42.110 回答
-1

您缺少 document.ready 功能...意思是在页面中加载了所有 dom 元素之后

<script type="text/javascript">
 $(document).ready(function(){
        $(".rdoNationality").on("change", function(){
            var valNationality = $(this).val(),
            divNationality = $("#" + valNationality);

            $("div").hide();
                divNationality.show();
        });
 });
</script>
于 2013-09-12T06:32:13.347 回答