Jquery多步驟表格的問題

Question

我正在使用jQuery創建一個多步表單，而我剛剛處於編寫此功能的初始階段。您可以在這裏看到一個jsfiddle：http://jsfiddle.net/ay3HV/1/

當您按下下一步按鈕時，表單的第一部分淡出並且接下來淡入。但這隻適用於第一組表單元素（總共有3個） 。我的HTML的格式，像這樣：

<form> 
<article> 
form slide a elements 
</article> 
<article> 
form slide b elements 
</article> 
<article> 
form slide b elements 
</article> 
</form> 

我使用jQuery來隱藏不適第一的所有文章，然後隱藏在接下來的那一套，並揭示了第二組，像這樣：

$("article:not(:last)").append('<a class="next" href="#">Next</a>'); 
    $("article:nth-child(1n+2)").hide(); 


    $("a.next").on("click", function(){ 
     var thisPar = $("this").parent("article"); 

     if (thisPar = $("article:first")){ 
      thisPar.hide(); 
      thisPar.next().fadeIn(); 
     } 

     else { 
      thisPar.hide(); 
      thisPar.next().fadeIn(); 
     } 

    }); 

由於某種原因，在第一次點擊下一步後，此功能無法工作。有任何想法嗎？ （見的jsfiddle）

Answer 1

這裏有一個簡單的解決方案：http://jsfiddle.net/ay3HV/23/

這是JS：

(function($){ 
    $(function() { 
     $("article:not(:last)").append('<a class="next" href="#">Next</a>'); 
     $("article:nth-child(1n+2)").hide(); 
     $("a.next").on("click", function(e){ 
      e.preventDefault(); 
      // your if statement was redundant 
      $(this).closest("article").hide().next().fadeIn(); 
     }); 
    }); 
})(jQuery); 

Answer 2

看看這個JSFiddle

$(document).ready(function() { 

    $("article:not(:last)").append('<a class="next" href="#">Next</a>'); 
    $("article:nth-child(1n+2)").hide(); 


    $("a.next").on("click", function(){ 
     var thisPar = $(this).parent("article"); //in your code 'this' is a string 

     if (thisPar[0] == $("article:first")[0]) //single = instead of == in your code 
     { 
      thisPar.hide(); 
      thisPar.next().fadeIn(); 
     } 

     else{ 
      thisPar.hide(); 
      thisPar.next().fadeIn(); 
     } 

    }); 
}); 
​ 

也是在這一行：thisPar[0] == $("article:first")[0] 你試圖比較兩個jQuery的對象。那些將永遠不同。在我的代碼中，我比較了兩個DOM對象。