按类名查找下一节
按类名查找下一节
提问于 2020-02-18 11:33:11
如何通过单击form_section类显示下一个div
$(".form_section").hide();
$(document).on("click", ".btn_next", function(e) {
$(this).next(".form_section").show();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row form_section">
<div>
<div></div>
<div></div>
<button class="btn btn-primary btn_next">SHOW NEXT SECTION</button>
</div>
</div>
<div class="row form_section">
<div>
<div></div>
<div></div>
<button class="btn btn-primary btn_next">SHOW NEXT SECTION</button>
</div>
</div>
<div class="row form_section">
<div>
<div></div>
<div></div>
<button class="btn btn-primary btn_next">SHOW NEXT SECTION</button>
</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-02-18 11:39:05
首先，您需要隐藏当前的".form_section“部分(指向单击的按钮)，然后获取要显示的下一个.form_section。
<script>
//$(".form_section").hide();
$(document).on("click", ".btn_next", function(e){
$(this).parents('.form_section').hide();
$(this).parents('.form_section').next().show();
});
</script>Stack Overflow用户
发布于 2020-02-18 11:35:04
要实现这一点，您需要遍历DOM以检索最近的父.form_section到单击的按钮，隐藏它，然后获得要显示的下一个.form_section。
要做到这一点，可以使用closest()、hide()、next()和show()的组合。试试这个：
$(document).on("click", ".btn_next", function(e) {
$(this).closest('.form_section').hide().next(".form_section").show();
});.form_section { display: none; }
.form_section:nth-of-type(1) { display: block; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row form_section">
<div>
<div>1</div>
<div></div>
<button class="btn btn-primary btn_next">SHOW NEXT SECTION</button>
</div>
</div>
<div class="row form_section">
<div>
<div>2</div>
<div></div>
<button class="btn btn-primary btn_next">SHOW NEXT SECTION</button>
</div>
</div>
<div class="row form_section">
<div>
<div>3</div>
<div></div>
<button class="btn btn-primary btn_next">SHOW NEXT SECTION</button>
</div>
</div>
注意在页面加载时使用CSS隐藏/显示相关元素。这是一种比使用JS更好的方法，因为它避免了FOUC。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60279958
复制相关文章
相似问题
腾讯云开发者
