gpt4 book ai didi

jQuery : Open next DIV based on Current div element

转载 作者:行者123 更新时间:2023-12-01 04:36:15 25 4
gpt4 key购买 nike

我的 HTML 结构如下所示。

<dl id="steps">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div>
<h2>Some Title</h2>
<div class="options">
<div class="some-inputs"></div>
<div class="next"><input type="button class="btn" /></div>
</div>
<div class="options">
<div class="some-inputs"></div>
<div class="next"><input type="button class="btn" /></div>
</div>
</div>
</div>
</dl>

我想,当文档准备好时,上面的结构被隐藏。点击元素(在文档中可用)后,上面的结构将显示,但只有第一个 div,它具有类 options

注意:带有 some-options 类的 Div 包含不同的表单输入,如文本、单选、复选框等

那么如何执行单击按钮类 btn 来激活具有类 options 的父 div,并在单击当前激活的 div 上的下一个按钮后使用类 的下一个 div >选项 将启用。它将继续下去......直到选项 div 出现。

我已经累了。

$("#procced").click(function(){ 
$("#steps").show();

var i = 0;

});

jQuery 初学者需要一些指南才能实现这一点。

#procced 是 DOM 中的其他元素。我想像单击 #procced 时显示问题的 HTML 一样执行。我做了一些事情。 Next 不会显示整个结构,而只会显示第一个带有 .options 的 div 及其下一个按钮(显然)。然后单击 .btn 接下来将显示 .options。以前的内容将保留显示

最佳答案

$( document ).ready(function() {
$( ".options" ).hide().first().show();

$(".next").click(function(){ $(this).parents('.options').next().show();});

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dl id="steps">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div>
<h2>Some Title</h2>
<div class="options">options1
<div class="some-inputs"></div>
<div class="next"><input type="button" class="btn" /></div>
</div>
<div class="options">options1
<div class="some-inputs"></div>
<div class="next"><input type="button" class="btn" /></div>

</div>
<div class="options">options1
<div class="some-inputs"></div>
<div class="next"><input type="button" class="btn" /></div>

</div>
</div>
</div>
</dl>

你好,你可以这样做

首次演出

$( document ).ready(function() {
$("#procced").click(function(){
$( ".options" ).first().show();});});

然后单击事件父选项 div 的按钮,您可以这样做

$(".btn").click(function(){
$(this).parents('.options').first().addClass("active")
});

对于下一场演出,你可以做这样的事情

$(".next").click(function(){ 
$(this).parents('.options').next().show();

请将“next”和“btn”点击事件放在document.ready括号中

关于jQuery : Open next DIV based on Current div element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53532303/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com