0

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 を使用して、最初の記事ではないすべての記事を非表示にし、次にそのセットを非表示にして、2 番目のセットを次のように表示します。

$("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 を参照)

4

2 に答える 2

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] 2 つの jquery オブジェクトを比較しようとしていました。それらは常に異なります。私のコードでは、2 つの DOM オブジェクトを比較しています。

于 2012-09-10T21:38:29.680 に答える
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);
于 2012-09-10T21:44:52.023 に答える