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

看看这个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对象。

Answer 2

这是一个简单的解决方案：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);

Jquery多步形式的问题

2 个答案: