javascript - 当选择单选按钮时显示新 div 的最佳方式是什么？

Question

<div id="q1">
    <p>1. are you a human?</p>
    <ul class="answers">
        <input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Male</label><br/>
        <input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Female</label><br/>
    </ul>
</div>

<div id="q2" style="display: none;">
    <p>2.what's your favorite color out of these listed</p>
    <ul class="answers">
        <input type="radio" name="q2" value="a" id="q2a"><label for="q2a">Pink</label><br/>
        <input type="radio" name="q2" value="b" id="q2b"><label for="q2b">Blue</label><br/>  
        <input type="radio" name="q2" value="c" id="q2c"><label for="q2c">Greem</label><br/>

    </ul>
</div>

      document.getElementById('q1a').onclick = function() {
            document.getElementById("q2").style.display = "block";
    }

      document.getElementById('q1b').onclick = function() {
            document.getElementById("q2").style.display = "block";
    }

      document.getElementById('q2a').onclick = function() {
            document.getElementById("q3").style.display = "block";
    }

      document.getElementById('q2b').onclick = function() {
            document.getElementById("q3").style.display = "block";
    }
      document.getElementById('q2c').onclick = function() {
            document.getElementById("q3").style.display = "block";
    }

所以现在我基本上是检查用户是否正在检查其 div 内的单选按钮，如果检查了按钮，则将显示下一个 div。

但是，这种方法对我来说似乎效率低下，但我真的想不出更好的方法来做到这一点。

Answer 1

您可以使用数据属性来声明下一个问题是什么，然后查询该问题以设置可见性。类似于:

document.addEventListener('click', function(e) {
  if (e.target.dataset.next) {
    document.getElementById(e.target.dataset.next).classList.add('visible');
  }
});

.question {
  display: none;
}

.question.visible {
  display: block;
}

<div id="q1">
    <p>1. are you a human?</p>
    <ul class="answers">
        <input type="radio" name="q1" value="a" id="q1a" data-next="q2"><label for="q1a">Male</label><br/>
        <input type="radio" name="q1" value="b" id="q1b" data-next="q2"><label for="q1b">Female</label><br/>
    </ul>
</div>

<div id="q2" class="question">
    <p>2.what's your favorite color out of these listed</p>
    <ul class="answers">
        <input type="radio" name="q2" value="a" id="q2a"><label for="q2a">Pink</label><br/>
        <input type="radio" name="q2" value="b" id="q2b"><label for="q2b">Blue</label><br/>  
        <input type="radio" name="q2" value="c" id="q2c"><label for="q2c">Greem</label><br/>

    </ul>
</div>