您好我有以下HTML结构:
<div class="form-step2 hidden"></div>
<div class="form-step2 hidden"></div>
<div class="form-step2 hidden"></div>
<div class="form-step2 hidden"></div>
<button type="button" id="addblock" class="btn btn-primary btn-block">+</button>
如果我点击按钮,我想删除一个隐藏的,而不是下一个隐藏的。 我的JS:
$( "#addblock" ).click(function() {
$( ".form-step2" ).next(".form-step2").removeClass("hidden");
});
但这会删除所有隐藏的
答案 0 :(得分:1)
使用类form-step2
hidden
元素中删除隐藏的类
$("#addblock").click(function() {
$(".form-step2.hidden:first").removeClass("hidden");
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-step2 hidden">1</div>
<div class="form-step2 hidden">2</div>
<div class="form-step2 hidden">3</div>
<div class="form-step2 hidden">4</div>
<button type="button" id="addblock" class="btn btn-primary btn-block">+</button>
答案 1 :(得分:1)
$("#addblock").click(function() {
$('.hidden:first').removeClass("hidden");
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="form-step2 hidden">A</div>
<div class="form-step2 hidden">B</div>
<div class="form-step2 hidden">C</div>
<div class="form-step2 hidden">D</div>
<button type="button" id="addblock" class="btn btn-primary btn-block">+</button>
答案 2 :(得分:0)
试试这个:
$( "#addblock" ).click(function() {
var $step = $( ".form-step2" ).not('.hidden');
if($step.length<1)
{
$( ".form-step2:first" ).removeClass("hidden");
}
else
{
$step.next(".hidden").removeClass("hidden");
}
});
答案 3 :(得分:-1)
http://codepen.io/pallavi1811/pen/KpBjNL
$( "#addblock" ).click(function() {
$( ".form-step2" ).siblings(".form-step2").eq(1).removeClass("hidden");
});