【发布时间】：2019-02-06 16:37:05
【问题描述】：
这与querySelectorAll detecting value in input 不同。
我不是在询问输入字段是否有值。我在问如何检测当前可见的 div 是否包含输入字段。我正在根据 stackoverflow 的要求提出一个新问题。
我有一系列 div，从 id question0 到 question35。不过，就我的问题而言，我们只需要按如下方式查看这几个 div：
<div id="requiredMessage" style="display:none"><p>This field is required</p></div>
<div class="questionholder" id="question0" style="display:block">
<a class="text2button" onclick="displayquestion(1)">Start</a>
</div>
<div class="questionholder" id="question1" style="display:none">
<h5>Surname</h5>
<input class="input1" name="ln"><br>
<a class="text2button" onclick="displayquestion(2)">Next</a>
</div>
<div class="questionholder" id="question2" style="display:none">
<h5>Given Name</h5>
<input class="input2" name="gn"><br>
<a class="text2button" onclick="displayquestion(3)">Next</a>
</div>
<div class="questionholder" id="question3" style="display:none">
<h5>Relationship Surname</h5>
<input class="input3" name="REL"><br>
<a class="text2button" onclick="displayquestion(4)">Next</a>
</div>
<div class="questionholder" id="question4" style="display:none">
<h5>Are multiple names involved?</h5><br>
<a class="text2button" onclick="displayquestion(5)">Yes</a>
<a class="text2button" onclick="displayquestion(6)">No</a>
</div>
<div class="questionholder" id="question5" style="display:none">
<h5>What is the second name?</h5>
<input class="input5" name="secondName"><br>
<a class="text2button" onclick="displayquestion(6)">Next</a>
</div>
<div class="questionholder" id="question6" style="display:none">
<h5>What is your fav color?</h5>
<input class="input6" name="favColor"><br>
<a class="text2button" onclick="displayquestion(7)">Next</a>
</div>
如您所见，两个 div 都在标签中包含一个按钮，该按钮触发一个名为 displayquestion(a) 的 javascript 函数：
function displayquestion(a){
var b = a-1;
var currentInput = '';
var questions = document.getElementsByClassName("questionholder");
var showRequired = document.getElementById("requiredMessage");
console.log("a = " + a + " and b = " + b);
if (document.querySelector('input.input' + b) !== null) {
var currentInput = document.querySelector('input.input' + b).value;
}
if (([0,3,4,7].indexOf(b) !== -1)) { // Enter in [] all question # that should be IGNORED. question0 = 0, question1 = 1, etc
console.log("path 1");
showRequired.style.display = "none";
for(var i=0; i < questions.length; i++) {
questions[i].style.display = "none";
}
var nextQuestion = document.getElementById("question" + a);
if(nextQuestion !== null) {
nextQuestion.style.display = "block";
}
} else {
console.log("path 2");
if (currentInput == '') {
showRequired.style.display = "block";
} else {
showRequired.style.display = "none";
for(var i=0; i < questions.length; i++) {
questions[i].style.display = "none";
}
var nextQuestion = document.getElementById("question" + a);
if(nextQuestion !== null) {
nextQuestion.style.display = "block";
}
}
}
}
onclick 发送一个与下一个要显示的问题相对应的数字。然后该函数隐藏所有问题 div，并显示包含 id question# 的 div，其中 # = 按钮发送的数字。
但是，该功能还用于检查是否应该忽略问题（换句话说，如果需要填写输入字段，它将阻止“下一步”按钮工作。这些应该被忽略的问题，在其他不需要的单词，出现在 if 语句中 if (([0,3,4,7].indexOf(b) !== -1))) 或者如果 div 包含的输入字段不是' t 空白。
如果输入字段不为空，下一步按钮应该可以工作。
请参阅jsfiddle 该代码仅在 javascript 位于正文内容中时才起作用。
到目前为止，我已经很好地完成了这项工作，除非问题 div 根本不包含任何输入。在这种情况下：问题 4。
您会注意到这个问题只包含一个是和否按钮。现在，应该忽略这个问题，因为 if 语句 [0,3,4,7].indexOf(b) !== -1) 包含数字 4，对应于 question4。
问题在于，这仅在用户单击“是”按钮时才有效。如果用户单击“否”，则会显示错误消息。
如何修复我的代码，以忽略 YES 和 NO（不显示错误消息），以便 Yes 导致 question5，然后 6 而 No 直接导致 question6？
请不要使用 jquery。
【问题讨论】：
-
如果你使用类来显示元素而不是内联样式会容易得多
-
为什么更容易？这不是一回事吗？
-
更容易，因为您将 html 和 CSS 分开，并且可能是因式分解 css
-
否，因为没有选择器来查找某些内容是可见还是隐藏。所以为了知道，你必须循环
标签： javascript html