javascript - クリックイベントごとにdivを1つずつ表示するjquery

Question

これは私のコードです:

   <script type="text/javascript">
    $(document).ready(function(){
        $('.toAdd').hide();
        $('#add').click(function () {
            var i = 0;
            $('.toAdd').each(function () {
                if ($(this).show()) {
                    i++;
                }
            });
        });
    });
    </script>

    <div id=add><input type="button" value="click"/>
    </div>
    <div id="toAdd">
    <label>1</label>
    </div>
    <div id="toAdd">
    <label>2</label>
    </div>
    <div id="toAdd">
    <label>3</label>
    </div>
    <div id="toAdd">
    <label>4</label>
    </div>

このコードでは、クリック イベントごとに 1 つずつ div を表示する必要がありますが、機能していませんか?

Answer 1

IDは一意である必要があります。代わりにクラスを使用してください。

$('.toAdd').hide();

var count = 0;
$('input').on('click',function(){
    $('.toAdd:eq('+count+')').show();
    count++;
});

JSFiddle

Answer 2

div で id="toAdd" を class="toAdd" に変更します

Answer 3

id="toAdd"他の人が言ったように、`class="toAdd"に変更する必要があります。

次に、非表示にされていない最初の DIV を次のように表示できます。

    $('#add input').click(function () {
        $('.toAdd:hidden:first').show();
    });

フィドル

Answer 4

交換<div id="toAdd"> with <div class="toAdd">

そしてこれをする

  $('.toAdd').each(function () {
                if (!$(this.is(":visible"))) {
                   $(this).show();
                   break;
                }
            });