0

我正在尝试为每个单选按钮制作，当单击它以显示有关该单击标题的更多信息的 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++;
}
4

4 回答 4

3

您可以尝试使用“每个”更改循环

$(function(){
 $("input[type='radio']").each(function(){
  $(this).change(function(){
   if ($(this).is(':checked'))
    $(this).next().show();
   else
    $(this).next().hide();
  });
 });
});

如果您为无线电元素分配一个类以专门关注它们，那将是可取的。像“radioElements”这样的东西就足够了。或者您也可以将 id 与 starter 一起使用：“radio_1”、“radio_2”，然后使用输入 [id^='radio_']。

在所有情况下，您都可以使用“每个”功能。

更深入地讲，如果您希望切断所有其他无线电“信息”，请将其更改为：

$(function(){
 $("input[type='radio']").each(function(){
  $(this).change(function(){
   if ($(this).is(':checked')) {
    $("input[type='radio']").next().hide();
    $(this).next().show();
   }
  });
 });
});
于 2013-04-05T21:26:29.703 回答
3

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;
}

小提琴 http://jsfiddle.net/UKn6D/

于 2013-04-05T21:28:21.667 回答
0

而不是有一段时间看起来像那样为什么不简单地拥有

<div id="input-container">
<input class="clickable" />
<div class="content"></div>
</div>

然后这将与多个一起使用，并且 jQuery 可以是这样的

$('#input-container input.clickable').click(function() {
$(this).parent().find('div.content').hide();
$(this).next('div.content').show();
});

我还没有实际测试过上述内容，但我相信它应该对你有用，拥有容器 ID 的原因只是为了加快你的 jQuery 速度，因为它首先通过#elementID 附加更快

于 2013-04-05T21:27:15.797 回答
0 
$('input[type="radio"]').on('change', function() {
  var id = $(this).attr('id'); //Get the ID from the selected radio button
  $('div:visible').hide(); //Hide visible Divs
  $('div.event' + id).show(); //Show matched Div
});

您需要给 div 一个额外的类名并在此处更新 jQuery 代码。您还需要确保为输入元素分配一个名称属性，以便它们都属于同一组——假设它们是。

于 2013-04-05T21:27:31.300 回答