0

我有一个表单，它有五个文本输入，a 到 e。我设置了它，所以只有前两个通过 css:display 可见，我将后三个设置为 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 循环，但它使整个应用程序变慢并且无法正确加载。

感谢您的任何想法！:)

4

1 回答 1

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/

于 2012-11-28T04:44:01.360 回答