jQuery的删除类隐藏的onclick

Question

你好我有以下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"); 
}); 

但这删除所有隐藏

Answer 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>

Answer 2

$("#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>

删除隐藏类

Answer 3

试试这个：

$("#addblock").click(function() { 
    var $step = $(".form-step2").not('.hidden'); 
    if($step.length<1) 
    { 
     $(".form-step2:first").removeClass("hidden"); 
    } 
    else 
    { 
     $step.next(".hidden").removeClass("hidden"); 
    } 

}); 

Answer 4

ü可以试试这个：

http://codepen.io/pallavi1811/pen/KpBjNL

$("#addblock").click(function() { 
    $(".form-step2").siblings(".form-step2").eq(1).removeClass("hidden"); 
});