Javascript - 通过键盘输入显示需要的表单输入

Question

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

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

选项A，选项-B等为形式 answer_answera，answer_answerb等文本框的ID类表单输入

<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不会出现。我想过在整个最后一个block/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'); 
    }) 

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

• 此操作是'#answer_answer'+last元素上的keyup事件。 因为我们知道，当last = 'b'这个承诺制成，这 的真正含义'#answer_answerb'

• 的承诺是执行下面的代码：

  的console.log（“求”）; var elem = document.getElementById（'option - '+ next）; elem.style.display =“block”; console.log（'hit this'）;

因此，当你开始在#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/