javascript - 仅当用户选择当前 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>

(我有类似 39 div 的东西)

只有当用户选择 div1 上存在的两个单选按钮之一时，我才需要显示 div2。

我试过:

$(document).ready(function () {

$('div').hide();

$("input[type=radio]").change(function() {

     $( '#' + $(this).attr('id') + 'div' ).show();

    $('div:not(#' + $(this).attr('id') + 'tab)' ).hide();

});

});

但是不工作...

我该怎么做？ 谢谢

Answer 1

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

例如，#2div已显示。
但它也不是#2tab , 所以它是隐藏的。

另请注意 IDs must be unique在 HTML 中。
考虑使用 data attribute相反。
参见 jQuery's 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>