Question

我需要在此fiddle

上再添加2个div

当我添加它时，它不起作用..它显示下面的文字，并且evrything是错误的。你知道如何添加2个选项

$(document).ready(function () {
    $('#div1,#div2').hide();
    $('#id_radio1').click(function () {
        $('#div2').hide('fast');
        $('#div1').show('fast');
    });
    $('#id_radio2').click(function () {
        $('#div1').hide('fast');
        $('#div2').show('fast');
    });
});

Answer 1

使用属性选择器

尝试此简化代码

JQUERY：

$(document).ready(function() {
    $('[id^=div]').hide();
    $('[id^=id_radio]').click(function() {
        $('[id^=div]').hide('fast');
        $('#div' + this.id.slice(-1)).show('fast');
    });
});

HTML：

<center>
    <h2>show hide div on click using jquery</h2>
    <div style="padding:25px;width: 100px;">
        <input id="id_radio1" type="radio" name="name_radio1" value="value_radio1" />Radio1
        <br />
        <input id="id_radio2" type="radio" name="name_radio1" value="value_radio2" />Radio2
        <br />
        <input id="id_radio3" type="radio" name="name_radio1" value="value_radio2" />Radio3
        <br />
        <input id="id_radio4" type="radio" name="name_radio1" value="value_radio2" />Radio4
    </div>
    <div align="center" style="padding:25px;width: 300px;">
        <div id="div1">This is First (1st) division</div>
        <div id="div2">This is Second (2nd) division</div>
        <div id="div3">This is Second (3rd) division</div>
        <div id="div4">This is Second (4th) division</div>
    </div>
</center>

Fiddle Demo

Answer 2

在这里，我使用class而不是ID将您的代码修改为无限数量的单选按钮。希望这会有所帮助：

FIDDLE： http://jsfiddle.net/94mW8/24/

<强>使用：

1：为输入无线电提供唯一ID。

2：创建一个元素，假设div为属性data-id，并在输入无线电中使用相同的值。

3：使用CSS使用data-id属性隐藏此元素，并在单击单选按钮时弹出该元素。

Answer 3

/ ** HTML Code我添加了两个div。但我把所有div都放在div ** /

中

<center>
             <h2>show hide div on click using jquery</h2>
              <div style="padding:25px;width: 100px;">
                   <input id="id_radio1" type="radio" name="name_radio1" value="value_radio1" />Radio1
                  <br />
                   <input id="id_radio2" type="radio" name="name_radio1" value="value_radio2" />Radio2
              </div>
              <div align="center" style="padding:25px;width: 300px;">
                  <div class="divClass">
                   <div id="div1">This is First (1st) division</div>
                   <div id="div2">This is Second (2nd) division</div>
                       <div id="div3">This is third (3rd) division</div>
                       <div id="div4">This is fourth (4th) division</div>
                      </div>
              </div>
     </center>

/ ** jquery中的一些修改** /

$(document).ready(function () {
         $('.divClass div').hide();
                    $('#id_radio1').click(function () {
                       $('.divClass div').hide('fast');
                       $('#div1').show('fast');
                        $('#div3').show('fast');
                });
                $('#id_radio2').click(function () {
                      $('.divClass div').hide('fast');
                       $('#div2').show('fast');
                        $('#div4').show('fast');
                 });
});

需要再添加2个div

3 个答案: