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。在这里检查此提琴http://jsfiddle.net/vDBDA/2/

现在有两个查询1.在使用单选按钮时，我使用重复的id来显示类似的div类型，例如此代码

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

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

1. 默认情况下，当页面加载数为200时被选中。.在这里，它正在显示与单选按钮200相关联的div，但是在实际编程中以及在localhost /浏览器中，它都不会显示。.可能是什么原因？

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

Answer 1

如果要对某些元素组应用某些效果，然后将所有这些元素归为一个类，则ID应该是唯一的。 为了应用效果，您需要使用$('.classname').fadein();进行指定$('.classname').fadein();

我已经稍微修改了您的相关检查http://jsfiddle.net/vDBDA/7/

Answer 2

只需添加class并删除DOM的ID ，然后使用.on() jQuery方法即可将事件绑定到动态加载的内容上。

Answer 3

您可以使用类代替ID，因为ID对于一个HTML页面必须是唯一的。

Answer 4

您可以为每个分组所需的每个元素分配一个类。 然后，您可能需要使用每个函数迭代这些元素。

$(selector).each( function(){
     //hide or show...etc
});

Answer 5

只需在您的css文件中添加此类

.hide_div{
    display: none;
}

隐藏任何div时，将此属性应用于div，如果要显示div，则将show_div作为类。 使用addClass将CSS应用于该DIV。

.show_div{
    display: block;
}

Answer 6

    i try your code...and here is what i did...

    <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 class="100 imgDisp" >
        <div class="heading">10x10</div>
        <input type="radio" name="preExistingImage" class="100" value="10x10-1"
        />
        <img src="1-1.png">
        <input type="radio" name="preExistingImage" class="100" value="10x10-2" />
        <img src="1-2.png">
    </div>
    <div class="200 imgDisp">
        <div class="heading">10x20</div>
        <input type="radio" name="preExistingImage" class="200" value="10x20-1"
        />
        <img src="2-1.png">
        <input type="radio" name="preExistingImage" class="200" value="10x20-2" />
        <img src="2-2.png">
    </div>
    <div class="200 imgDisp" >
        <div class="heading">20x10</div>
        <input type="radio" name="preExistingImage" class="200" value="20x10-1"
        />
        <img src="3-1.png">
        <input type="radio" name="preExistingImage" class="200" value="20x10-2" />
        <img src="3-2.png" width="20" height="10">
    </div>

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