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>

Answer 2

您可以通过“名称”然后使用无线电名称数组来定位输入元素，您可以编写一些像这样的函数;

        function radioValue(radioName){
            var radioArray = document.getElementsByName(radioName);
            var i = 0;
            while(i < radioArray.length){
                if(radioArray[i].checked){
                return radioArray[i].value;
                break;
                }
            i++;
            }
        }

此函数采用输入[radio]元素的名称，如果“已选中”则逐个检查，然后返回已检查的输入值。

您可以将它用作收音机系列;

        document.addEventListener('click', function(){ 
        //console.log(radioValue("radioName"));
        document.getElementById("div-"+radioValue("radioName")).display = "block";
        });

详细了解getElementsByName：http://www.w3schools.com/jsref/met_doc_getelementsbyname.asp

选择单选按钮时，显示新div的最佳方法是什么？

2 个答案: