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

您可以尝试使用“each”

更改循环

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

如果您将一个类分配给无线电元素以专门针对它们，那将是首选。像“radioElements”这样的东西应该足够了。或者您也可以使用带有启动器的id：“radio_1”，“radio_2”，然后使用输入[id ^ ='radio _']。

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

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

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

Answer 2

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/

Answer 3

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

<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连接速度更快

Answer 4

$('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代码。您还需要确保为输入元素指定name属性，以便它们都属于同一组 - 假设它们是。

foreach单选按钮显示更多信息

4 个答案: