Jquery多步表单的问题
Jquery多步表单的问题
提问于 2012-09-11 05:18:38
我正在使用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隐藏所有不是第一个的文章，然后在next上隐藏该集合，并显示第二个集合：
$("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)
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-09-11 05:44:52
这里有一个简单的解决方案：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);Stack Overflow用户
发布于 2012-09-11 05:38:30
看一下这个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对象。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12359630
复制相关文章
相似问题
腾讯云开发者
