Question

我有一个有五个文本输入的表单，a到e。我设置它，所以只有前两个通过css：display可见，我设置最后三个显示：none最初。

我有我的javascript，因此它将最后一个输入设置为'b'，并将下一个输入设置为'c'，并根据其他文本是否为空来更改上一个和下一个变量。

option-a，option-b等是表单中文本框的id answer_answera，answer_answerb等是表单输入的类

<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>

这适用于第一个输入。当我输入表格输入b时，表格输入c出现。但是，我认为如何连续刷新自身，因为当我输入表单输入c时，表单输入d不会出现。我想在整个最后一个块/ keyup函数周围放置一个while循环，但它使整个应用程序变慢并且无法正确加载。

感谢您的任何想法！：）

Answer 1

在我们解决这个问题之前，让我们快速回顾一些Javascript概念。首次加载文档时，<script></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 = '';
  }

评估完成后，在刷新页面之前，它们永远不会再次运行。因此，当页面完成加载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');
  })

但是，此代码绑定一个“处理程序”（未来的承诺），以便在给定用户操作的情况下执行某些代码。

该操作是keyup元素上的'#answer_answer'+last事件。因为我们在做出这个承诺时知道last = 'b'，所以真的意味着'#answer_answerb'
承诺是执行以下代码：

的console.log（ '求'）; var elem = document.getElementById（'option - '+ next）; elem.style.display = “块”; console.log（'点击这个'）;

因此，当您开始输入#answer_answerb时，会显示#answer_answerc字段（请记住next = 'c'）。如果您在#answer_answerb中输入更多内容，#answer_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>

这将产生预期的效果，但很难维持。如果您决定添加更多文本字段，则必须为每个字段创建承诺。您可以在http://jsfiddle.net/tppiotrowski/GkT2g/

找到更优雅的问题解决方案

Javascript - 通过键输入显示表单输入

1 个答案: