jQuery显示/隐藏的div选择相关的单选按钮

Question

This is my jquery code

$(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');
});
});

this is html code

<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>

The code is working fine on choosing 100 radio button it is showing div with id = 100 and on selecting id = 200 it is showing two divs with id = 200. here check this fiddle http://jsfiddle.net/vDBDA/2/

now there are two queries 1. I use duplicate id to show similar type of divs on selection of radio button like this code

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

though it is working fine but I know duplicate id's is a problem. how can I fix it?

1. when the page loads number 200 is checked by default.. and here in this fiddle it is displaying the divs associated with radio button 200 but in actual programming and in localhost/browser it does not show.. What could be the reason?

All your help will be golden. thanks guys in advance

Answer 1

ID should be unique if you want to apply some effects to some group of elements then have all those elements in one class. and for applying effect you need to specify using $('.classname').fadein();

I have slightly edited your fiddly pls check http://jsfiddle.net/vDBDA/7/

Answer 2

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

Answer 3

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

Answer 4

You can assign a class to each element that you want per grouping. You may need to then iterate over those elements using an each function.

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

Answer 5

Simply add this class in your css file

.hide_div{
    display: none;
}

While hiding any div, apply this property to the div and if you want to show the div then user show_div as class. Use addClass for applying the CSS to that 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');
    });
});