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是一个问题。我该如何解决？

当默认情况下检查页面加载数字200时...在这个小提琴中它显示与单选按钮200相关联的div但在实际编程中并且在localhost / browser中它不显示..可能是什么原因？

你所有的帮助都将是金色的。提前谢谢你们

Answer 1

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

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

Answer 2

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

Answer 3

您可以使用class而不是ID因为ID对于一个html页面必须是唯一的。

Answer 4

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

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

Answer 5

只需在css文件中添加此类

即可

.hide_div{
    display: none;
}

隐藏任何div时，将此属性应用于div，如果要显示div，则将show_div用作class。使用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');
    });
});

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

6 个答案: