仅当用户在当前DIV上选择“无线电”按钮时显示下一个Div

Question

我只需要在当前Div中选择一个无线电按钮时才向用户显示下一个Div ...让我解释一下：

<h1>First question</h1>
<input type="radio" id="2" value="Dog">Dog<br>
<input type="radio" id="2" value="Cat">Cat<br>
<br>
<div id='2div'><h1>Second question</h1>
<input type="radio" id="3" value="Blue">Blue<br>
<input type="radio" id="3" value="Green">Green<br>
</div>

（我有39div）

我只有在用户选择Div1上存在的两个广播按钮之一的情况下才需要显示DIV2。

我尝试了：

$（document）.ready（function（）{$（'div'）。hide（）;$（"输入[type =无线电]"）。更改（function（）{     $（'＃'   $（this）.attr（'id'）  'div'）.show（）;    $（'div：not（＃'   $（this）.attr（'id'）  'tab）'）.hide（）;}）;}）;

但不起作用...

我该怎么做？谢谢

Answer 1

主要问题似乎是显示了<div>，然后立即再次隐藏。

例如，显示了#2div。
但这也不是#2tab，因此被隐藏了。

还请注意，ID在HTML中必须是唯一的。
考虑使用数据属性。
请参阅jQuery的data()。

$(function() {
  $("input[type=radio]").change(function() {
    var id = $(this).data('id');
    $('#' + id + 'div').show();
    //$('div:not(#' + id + 'tab)').hide();
  });
});

div {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>First question</h1>
<input type="radio" name="animal" data-id="2" value="Dog">Dog<br>
<input type="radio" name="animal" data-id="2" value="Cat">Cat<br>
<br>
<div id="2div">
  <h1>Second question</h1>
  <input type="radio" name="color" data-id="3" value="Blue">Blue<br>
  <input type="radio" name="color" data-id="3" value="Green">Green<br>
</div>
<div id="3div">
  <h1>Third question</h1>
  <input type="radio" name="shape" data-id="4" value="Blue">Round<br>
  <input type="radio" name="shape" data-id="4" value="Green">Square<br>
</div>