javascript - foreach 单选按钮显示更多信息

Question

我正在尝试为每个单选按钮制作，当单击它时显示带有有关单击标题的更多信息的div，当单击另一个单选按钮时显示有关该单选按钮的信息并隐藏另一个单选按钮被点击的:

HTML:

<input type="radio" id="1" />
<div class="event1">
 content..
</div>

<input type="radio" id="2" />
<div class="event2">
 content..
</div>

<input type="radio" id="3" />
<div class="event3">
 content..
</div>

jQuery:

var i = 1;
while(i < 10) {
$('.event' + i).hide();
    $("#" + i).click(function() {
        $('.event' + i).show();
    });
i++;
}

Answer 1

HTML

<input type="radio" name="radio" id="1" />
<div class="event">
 content.. 1
</div>

<input type="radio" name="radio" id="2" />
<div class="event">
 content.. 2
</div>

<input type="radio" name="radio" id="3" />
<div class="event">
 content.. 3
</div>

JS

$('input[name=radio]').click(function() {
    $('.event').hide();
    $(this).next('.event').show();
});

CSS

.event {
    display: none;
}

fiddle http://jsfiddle.net/UKn6D/