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 隐藏所有不是第一个的文章，然后在下一个隐藏该集合，并像这样显示第二个集合：

$("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] 您试图比较两个 jquery 对象。那些总是不同的。在我的代码中，我比较了两个 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 回答