某種數組來創建多個步驟表單？

Question

這裏的一個很好的成員幫助我創建了一個表格，它隨着您的進行而添加了步驟。我修改了一下，讓您通過點擊更改按鈕來更改這些問題的答案。當然，我意識到自己的侷限性，並將其應用於第一個問題，而且很糟糕...... 我接觸到的方式是給每個問題和按鈕它是自己的唯一ID，我認爲這可能是錯誤的方法這個？

這是我想要什麼，我部分地完成一些：

• 填寫一個字段，按NEXT
• 場1打開成只讀的文本和ChangeButton出現
• 一個新的領域出現低於您可以填寫
• 通過按字段1上的CHANGE，字段2變爲不可編輯，字段1現在可編輯。更改按鈕也會變成「保存」。通過單擊保存，可以使字段2可編輯，並且字段1不可再編輯。
• 這個永續的:)

我想什麼我發現在互聯網上，但我希望有人誰是這更好的可以幫助我一點，如果這是確定:) 這裏是我的Jfiddle http://jsfiddle.net/pufamuf/TEyVL/3/

謝謝！

Answer 1

Example of the following here

以下是我會完成你想要做什麼......

HTML：

<div id="question1" class="question active"> 
    <label>Q1</label> 
    <input type="text" /> 
    <input type="button" value="SAVE" class="button" /> 
</div> 

的jQuery：

var qa = []; // questions array of objects { text: "question text" } 

$('.button').live('click', function(e) { 
    var $but = $(this), 
     $inp = $but.prev(), 
     $parent = $but.parent(), 
     i = $parent.attr('id').match(/\d+$/)[0] - 1, 
     $new; 

    if ($but.val() == 'SAVE') { 

     // store value to array 
     qa[i] = { 
      text: $inp.val() 
     }; 

     // append new question inputs if needed 
     if (!$('#question' + (i + 2)).length) { 
      $new = $parent.clone(); 
      $new.attr('id', 'question' + (i + 2)); 
      $new.find('label').html('Q' + (i + 2)); 
      $new.find('input[type="text"]').val(''); 
      $new.insertAfter($parent); 
     } 

     // change to inactive attributes 
     $inp.attr('disabled', true); 
     $parent.removeClass('active').addClass('answered'); 
     $but.val('CHANGE'); 

    } else { // CHANGE 

     // change to active attributes 
     $inp.attr('disabled', false); 
     $parent.removeClass('answered').addClass('active'); 
     $but.val('SAVE'); 

    } 
}); 

我製作了數組存儲對象，因此如果需要，可以輕鬆地將其他屬性添加到每個問題。

See demo