我是jquery的新手,这是我的代码:
<script type="text/javascript">
$(document).ready(function () {
$('.toAdd').hide();
var count = 0;
$('#add').on('click', function () {
$('.toAdd:eq(' + count + ')').show();
count++;
});
});
</script>
<div class="toAdd">One</div><div class="toAdd">Two</div><div class="toAdd">Three</div>
<input type="button" value="show" id="add"/>
<input type="button" value="hide" id="sub"/>
在此代码中,如果我单击显示按钮,它会逐一显示。之后,如果我点击隐藏按钮
,我需要逐个隐藏小提琴here
答案 0 :(得分:5)
$(document).ready(function () {
$('.toAdd').hide();
var count = 0;
$('#add').on('click', function () {
$('.toAdd:eq(' + count + ')').show();
count++;
});
var deCount = count;
$('#sub').on('click', function () {
count--;
$('.toAdd:eq(' + count + ')').hide();
});
});
答案 1 :(得分:4)
希望这可以帮助你......:)
$('#sub').on('click', function () {
if(count > 0){
count--;
$('.toAdd:eq(' + count + ')').hide();
}
});
答案 2 :(得分:2)
试试这个
<script type="text/javascript">
$(document).ready(function () {
$('.toAdd').hide();
$('#add').on('click', function () {
$('.toAdd,.hidden').first().show().addClass( "shown" ).removeClass( "hidden" );
});
$('#sub').on('click', function () {
$('.toAdd,.shown').last().hide().addClass( "hidden" ).removeClass( "shown" );
});
});
答案 3 :(得分:2)
答案 4 :(得分:2)
Outlooker的答案是对的,但有一点点错误。 when user will click on show button 4th time then your hide doesn't work as expected
。所以我只是在这里修理块并与你们分享。
Html代码:
<div class="toAdd">One</div>
<div class="toAdd">Two</div>
<div class="toAdd">Three</div>
<input type="button" value="show" id="add" />
<input type="button" value="hide" id="sub" />
Java脚本代码:
/**
* Hide all Content div
*/
$(".toAdd").hide();
/**
* Total no of content div find out
**/
var lengthDiv = $(".toAdd").length;
/**
* Default count declare
**/
var count = 0;
/**
* Click on show button
**/
$('#add').on('click', function () {
if (count < lengthDiv) {
$('.toAdd:eq(' + count + ')').show();
count++;
}
});
/**
* Click on hide button
**/
$('#sub').on('click', function () {
if (count > 0) {
count--;
$('.toAdd:eq(' + count + ')').hide();
}
});
答案 5 :(得分:1)
试试这个,这对你很有帮助
$('.toAdd').hide();
$('#add').click(function(){
$('div').each(function(key, value) {
$(value).delay(key * 500).fadeIn(500);
});});
$('#sub').click(function(){
$('div').each(function(key, value) {
$(value).delay(key * 500).fadeOut(500);
});
});
小提琴Here
答案 6 :(得分:1)
尝试
var $toAdds = $('.toAdd').hide();
var count = 0;
$('#add').on('click', function () {
if (count < $toAdds.length) {
$toAdds.eq(count).show();
count++;
}
});
$('#sub').on('click', function () {
if (count > 0) {
count--;
$toAdds.eq(count).hide();
}
});
演示:Fiddle