仅当用户在当前 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。

我试过了：

$(文档).ready(函数 () { $('div').hide(); $("input[type=radio]").change(function() { $( '#' + $(this).attr('id') + 'div' ).show(); $('div:not(#' + $(this).attr('id') + 'tab)' ).hide(); }); });

但是不工作...

我该怎么做？ 谢谢

Answer 1

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

例如，显示#2div。
但也不是#2tab，所以被隐藏了。

还要注意 HTML 中的 IDs must be unique。
考虑改用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>