javascript - 动态隐藏和显示div

Question

如何使用 JavaScript 动态实现此目的？

onselect 单选按钮 1:显示 div 1,2,5，隐藏(如果尚未隐藏)div 3,4,6,7

onselect 单选按钮 2:显示 div 3,4,6,7，隐藏(如果尚未隐藏)div 1,2,5

<input type="radio" id="button-1" name="button" />Button 1
<input type="radio" id="button-2" name="button" />Button 2

<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
<div id="div-4"></div>
<div id="div-5"></div>
<div id="div-6"></div>
<div id="div-7"></div>

编辑我的问题表述得不好，下类后在家会更好地表述..

Answer 1

为了让自己更轻松，请为两组单选按钮添加一个类，例如 divGroup1、divGroup2

    <div class="divGroup1" id="div-1"></div>
    <div class="divGroup1" id="div-2"></div>
    <div class="divGroup2" id="div-3"></div>
    <div class="divGroup2" id="div-4"></div>
    <div class="divGroup1" id="div-5"></div>
    <div class="divGroup2" id="div-6"></div>
    <div class="divGroup2" id="div-7"></div>

然后在 jQuery 中，执行如下操作:

$("#button-1").click(function()
{
    $(".divGroup1").show();
    $(".divGroup2").hide();
});

$("#button-2").click(function()
{
    $(".divGroup2").show();
    $(".divGroup1").hide();
});