Javascript-通过键输入使表单输入显得必要

我有一个表格，有五个文本输入，从a到e。我将其设置为只有前两个可以通过css:display看到，最后三个设置为display:none

我有我的javascript，所以它将最后一个输入设置为“b”，将下一个输入设置为“c”，并根据其他文本是否为空更改最后一个和下一个变量

选项a、选项b等是表单中文本框的id 答案A、答案B等是表单输入的类

<script>
  var last = 'b';
  var next = 'c';

  if (document.getElementById('option-c').value != null) {
    last = 'c';
    next = 'd';
  }

  if (document.getElementById('option-d').value != null) {
    last = 'd';
    next = 'e';
  }

  if (document.getElementById('option-e').value != null) {
    last = '';
    next = '';
  }

  $('#answer_answer'+last).keyup(function() {
    console.log('beg');
    var elem = document.getElementById('option-'+next);
    elem.style.display="block";
    console.log('hit this');
  })
  </script>

var last='b'；
var next='c'；
if（document.getElementById（'option-c'）。值！=null）{
last='c'；
next='d'；
}
if（document.getElementById（'option-d'）。value！=null）{
last='d'；
next='e'；
}
if（document.getElementById（'option-e'）。value！=null）{
最后=“”；
下一个=“”；
}
$（'#answer_answer'+last）.keyup（函数（）{
console.log（'beg'）；
var elem=document.getElementById（'option-'+next）；
elem.style.display=“块”；
log（'hit this'）；
})

这适用于第一个输入。当我输入表单输入b时，表单输入c出现。然而，我想，当我输入表单输入c时，表单输入d并没有出现，我如何让它不断地自我刷新呢。我曾考虑在最后一个block/keyup函数中加上一个while循环，但这会使整个应用程序运行缓慢，无法正常加载

---

谢谢你的想法！：）

在我们开始解决这个问题之前，让我们快速回顾一下Javascript的一些概念。首次加载文档时，

标记内的所有内容都将执行一次。这意味着将对以下所有语句进行评估：

  var last = 'b';
  var next = 'c';

  if (document.getElementById('option-c').value != null) {
    last = 'c';
    next = 'd';
  }

  if (document.getElementById('option-d').value != null) {
    last = 'd';
    next = 'e';
  }

  if (document.getElementById('option-e').value != null) {
    last = '';
    next = '';
  }

一旦对它们进行评估，在刷新页面之前，它们将不会再次运行。因此，当页面加载完成时，加载

last='b'

和

next='c'

以及三个

if

语句的计算结果都为false，并且不会执行（我假设初始加载时文本字段为空）。以下代码也将执行一次：

$('#answer_answer'+last).keyup(function() {
    console.log('beg');
    var elem = document.getElementById('option-'+next);
    elem.style.display="block";
    console.log('hit this');
  })

然而，这段代码绑定了一个“处理程序”（未来的承诺）来执行给定用户操作的一些代码

• 该操作是

  “#answer_answer”+最后一个
  元素上的
  keyup
  事件。
  因为我们知道，当这个承诺做出时，这个
  真正的意思是
  “#回答”

• 承诺执行以下代码：
  console.log（'beg'）； var elem=document.getElementById（'option-'+next）； elem.style.display=“块”； log（'hit this'）

因此，当您开始键入

#应答(answerb

时，将显示

#应答(answerc

字段（请记住

下一步='c'

）。如果您在

#answer\u answerb

中键入更多内容，则

#answer\u answerc

字段将保持可见。现在我们知道了你的代码所做的一切

那么，我们如何修复它呢？你能猜到吗？我们可以做出更多的承诺。完整代码：

<script>
      $('#answer_answerb).keyup(function() {
        var elem = document.getElementById('option-c');
        elem.style.display="block";
      })
      $('#answer_answerc).keyup(function() {
        var elem = document.getElementById('option-d');
        elem.style.display="block";
      })
      $('#answer_answerd).keyup(function() {
        var elem = document.getElementById('option-e');
        elem.style.display="block";
      })
</script>

$（'#答案b）.keyup（函数（）{
var elem=document.getElementById（'option-c'）；
elem.style.display=“块”；
})
$（'#answer_answerc）.keyup（函数（）{
var elem=document.getElementById（'option-d'）；
elem.style.display=“块”；
})
$（'#答案）。键控（函数（）{
var elem=document.getElementById（'option-e'）；
elem.style.display=“块”；
})

---

这将达到预期效果，但很难维持。如果您决定添加更多文本字段，则必须为每个字段创建承诺。您可以在这里找到一个更优雅的解决方案

您是否正在捕获有关元素的键盘事件？非常感谢！！！这个回答是如此彻底和深思熟虑。我真的很感谢你的时间和帮助它工作得很好！很乐意帮忙。你就要成为javascript忍者了！