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/