javascript - jquery 在选择相关单选按钮时显示/隐藏 div

Question

这是我的 jquery 代码

$(document).ready(function() {
$("div.imgDisp").hide();
$('[id="' + $(":radio:checked").val()+'"]').show();
    $('input[name="rdNumber"]:radio').click(function() {
     $("div.imgDisp").fadeOut('slow');
    $('[id="' + $(this).val()+'"]').fadeIn('slow');
});
});

这是html代码

<div class="wrapper"> <strong><span>*</span> Number</strong>

<div class="formText">
    <input type="radio" name="rdNumber" value="100" />100
    <input type="radio" name="rdNumber" value="200" checked="checked"/>200
    <input type="radio" name="rdNumber" value="300" />300</div>
</div>

<input type="radio" name="rdImage" value="preExisting" />Choose from images below
<div id="100" class="imgDisp">
<div class="heading">10x10</div>
<input type="radio" name="preExistingImage" id="100" value="10x10-1"
/>
<img src="1-1.png">
<input type="radio" name="preExistingImage" id="100" value="10x10-2" />
<img src="1-2.png">
</div>
<div id="200" class="imgDisp">
<div class="heading">10x20</div>
<input type="radio" name="preExistingImage" id="200" value="10x20-1"
/>
<img src="2-1.png">
<input type="radio" name="preExistingImage" id="200" value="10x20-2" />
<img src="2-2.png">
</div>
<div id="200" class="imgDisp">
<div class="heading">20x10</div>
<input type="radio" name="preExistingImage" id="200" value="20x10-1"
/>
<img src="3-1.png">
<input type="radio" name="preExistingImage" id="200" value="20x10-2" />
<img src="3-2.png" width="20" height="10">
</div>

代码运行良好选择 100 单选按钮时，它显示 id = 100 的 div，选择 id = 200 时，它显示两个 id = 200 的 div。在这里检查这个 fiddle http://jsfiddle.net/vDBDA/2/

现在有两个查询1. 我使用重复的 id 在选择单选按钮时显示类似类型的 div，就像这段代码

<div id="200" class="imgDisp">

虽然它工作正常，但我知道重复的 ID 是个问题。我该如何解决？

1. 当页面加载编号 200 时，默认情况下会选中。在这个 fiddle 中，它显示与单选按钮 200 关联的 div，但在实际编程和本地主机/浏览器中它不显示。可能是什么原因？

您的所有帮助将是宝贵的。提前谢谢大家

Answer 1

ID 应该是唯一的如果你想对某些元素组应用一些效果，那么有一个类中的所有这些元素。并且要应用效果，您需要指定使用$('.classname').fadein();

我稍微编辑了你的繁琐请检查 http://jsfiddle.net/vDBDA/7/