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"/>

このコードでは、表示ボタンをクリックすると、分割が 1 つずつ表示されます。その後、非表示ボタンをクリックすると、1つずつ非表示にする必要があります

フィドルhere

4

7 に答える 7

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

試す

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 に答える