1

我是 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

4

7 回答 7

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();
    });
});
于 2013-10-11T06:15:47.627 回答
4

希望这可以帮助你... :)

                 $('#sub').on('click', function () {
                        if(count > 0){
                           count--;
                        $('.toAdd:eq(' + count + ')').hide();
                        }

                    });
于 2013-10-11T06:10:52.650 回答
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" );
                });
            });
于 2013-10-11T06:13:36.537 回答
2

由 Outlooker 编辑jsfiddle

if($('.toAdd:eq(' + count + ')').is('*'))

添加了对项目存在的检查。

小提琴

于 2013-10-11T06:17:12.617 回答
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();
    }
});

小提琴示例

于 2013-10-11T07:21:18.213 回答
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

于 2013-10-11T06:15:15.540 回答
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();
    }    
});

演示：小提琴

于 2013-10-11T06:17:51.587 回答