2

这是我的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/浏览器中它没有显示。可能是什么原因？

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

4

6 回答 6

1

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

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

于 2013-03-05T09:13:01.157 回答
0

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
});
于 2013-03-05T09:12:12.193 回答
0

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

.hide_div{
    display: none;
}

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

.show_div{
    display: block;
}
于 2013-03-05T09:12:29.623 回答
0

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

于 2013-03-05T09:06:42.097 回答
0 
    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');
    });
});
于 2013-03-05T09:27:31.010 回答
0

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

于 2013-03-05T09:03:27.787 回答