Javascript 根据用户输入在网页上显示内容

我向用户提出了一系列问题。根据用户的回答，他/她将看到另一个问题或一些文本。例如，这是我的代码（简化）：

function layerOne（）{
var radioNo=document.getElementById（“radno”）；
var radioYes=document.getElementById（“radyes”）；
var text=document.getElementById（“第一层是”）；
//显示第二项问题
如果（radioNo.checked==真）{
radioYes.disabled=true；
}
//拒绝访问
如果（radioYes.checked==true）{
radioNo.disabled=真；
text.style.display=“块”；
}
}

#第一层是{
显示：无；
}

你不到18岁吗

不
对
很遗憾，您无法访问所需的文件

我将创建一个接受目标元素id和当前用户响应的函数。该函数将检查条件并显示或隐藏目标元素。 如果要持久化用户响应，可以将每个响应保存在数组或对象中

更新

function checkAndShowNext(val, target) {
  var text = document.getElementById(target);

  // Display target question

  // Deny access

}

<form name="myForm">
    <input type="radio" name="myRadios"  value="1" onclick="checkAndShowNext(this.value, 'nextQuestionId')" />
    <input type="radio" name="myRadios"  value="0" onclick="checkAndShowNext(this.value, 'nextQuestionId')" />
</form>

功能检查和显示下一步（val，目标）{
var text=document.getElementById（目标）；
//显示目标问题
//拒绝访问
}

根据您当前的方法，只需重复此步骤，但在包含下一个问题的Div中重复。根据效率，显然还有很多其他方法可以做到这一点，但这取决于解释和经验。如果你现在对这项技术最满意的话，完成它，然后尝试其他一些技术，试着感受一下

您可以创建单独的函数，这些函数也将根据用户的响应对用户进行升级，而不是“注入”到display属性，您可以创建两个适当标题为

hide

和

show

的类，并根据响应替换相应容器的类。这是我通常自己获得这些结果的方式，但这都是我的偏好

这是密码笔：

function layerOne（）{
var radioNo=document.getElementById（“radno”）；
var radioYes=document.getElementById（“radyes”）；
var text=document.getElementById（“第一层是”）；
var元素=document.getElementById（“第二层”）；
//显示第二项问题
如果（radioNo.checked==真）{
radioYes.disabled=true；
element.style.display=“块”；
}
//拒绝访问
如果（radioYes.checked==true）{
radioNo.disabled=真；
text.style.display=“块”；
}
}

#第一层是{
显示：无；
}
#第二层{
显示：无；
}
.表演{
显示：块；
}

你不到18岁吗

不
对
很遗憾，您无法访问所需的文件
你不到21岁吗

不
对

是的，我知道如何做到这一点，但我要求的是一种更有效的方法，而不是为每个问题编写这么多代码。用更多信息更新了我的答案，但你应该更清楚地知道你在问什么。上面我建议为

show

和

hide

创建两个类，这对我来说很好，但这都是我的首选。我明白了，谢谢。您能否举例说明如何使用

show

和

hide

类？我是说你实际的做法。。您只需使用jQuery的

removeClass（）

和

addClass（）

函数为您的div提供一个具有

可见性：可见的类来自
可见性：隐藏