javascript - 需要再添加 2 个 div

Question

我需要在这个 fiddle 上再添加 2 个 div

当我添加它时它不起作用.. 它在下面显示文本并且一切都是错误的。你知道如何添加 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