我有一个 HTML 块：
<form>
<section>
<div class="row normalTopPadding personalInfomation">
<!--Loads of HTML and Stuff-->
<a id="myButton" class="reg-next-button btn btn-default">Next</a>
</div>
</section>
<section>
<div class="row normalTopPadding employerInfomation">
<!--Loads of HTML and Stuff-->
<a id="myButton" class="reg-next-button btn btn-default">Next</a>
</div>
</section>
<section>
<div class="row normalTopPadding accountInfomation">
<!--Loads of HTML and Stuff-->
<a id="myButton" class="reg-next-button btn btn-default">Next</a>
</div>
</section>
</form>
我想要实现的是每次单击按钮以隐藏单击该按钮的面板并向下显示下一个面板时，因此..
<script>
$('.personalInfomation .reg-next-button, .employerInformation .reg-next-button', .accountInformation .reg-next-button').click(function (e) {
// Get the section that this button lives in
var form = $(this).closest("section");
//validation and other functions commented out for ease of reading
// Hide this section...
section.toggle();
// And show the next section
section.next().toggle();
});
</script>
虽然这隐藏了点击按钮的部分，但不会显示下一个。
有人能指出我的错误吗？
谢谢，C
您可以检查下一部分是否可用，然后隐藏当前部分。
注意：您的 jquery 选择器中有额外的单引号，我已将其删除。此外，您已声明变量form但已使用section，因此将表单重命名为部分
$('.personalInfomation .reg-next-button, .employerInformation .reg-next-button, .accountInformation .reg-next-button').click(function (e) {
// Get the section that this button lives in
var section = $(this).closest("section");
//validation and other functions commented out for ease of reading
// Hide this section...
var $next = section.next();
if($next.length>0) { // check condition first and then hide current section and show next
section.toggle();
// And show the next section
$next.toggle();
}
});
无需将每个部分放在按钮单击处理程序中，您可以对其进行概括并改进代码，以便在添加新部分时无需更改脚本。
注意- 不要对多个 html 元素使用相同的 id，因为它已用于按钮
$(function(){
$('section .row.normalTopPadding .reg-next-button').on('click', function (e) {
var section = $(this).closest("section");
var $next = section.next();
if($next.length>0) { // check condition first and then hide current section and show next
section.addClass('hide');
$next.removeClass('hide');
}
});
});.hide {
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<section>
<div class="row normalTopPadding personalInfomation">
<!--Loads of HTML and Stuff-->
This is SECTION 1
<a id="myButton" class="reg-next-button btn btn-default">Next</a>
</div>
</section>
<section class="hide">
<div class="row normalTopPadding employerInfomation">
<!--Loads of HTML and Stuff-->
This is SECTION 2
<a id="myButton" class="reg-next-button btn btn-default">Next</a>
</div>
</section>
<section class="hide">
<div class="row normalTopPadding accountInfomation">
<!--Loads of HTML and Stuff-->
This is SECTION 3
<a id="myButton" class="reg-next-button btn btn-default">Next</a>
</div>
</section>
</form>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句