jQuery每次单击事件一一显示div

Question

This is my code :

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

In this code i need to show div one by one for each click event but its not working?

Answer 1

ID must be unique , use classes instead.

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

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

JSFiddle

Answer 2

在您的div中，将id =“ toAdd”更改为class =“ toAdd”

Answer 3

As others have said, you need to change id="toAdd" to `class="toAdd".

You can then show the first unhidden DIV with:

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

FIDDLE

Answer 4

Replace <div id="toAdd"> with <div class="toAdd">

and do this

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

Answer 5

change id to class, like other have said and if you need to cycle the show/hide. then this might come handy

 $('.toAdd').hide();
 var i = 0;
 $('#add input').click(function () {
     i=(i >= 4)?0:i;
      //or if(i >= 4){ i=0;}
     $('.toAdd').eq(i).show().siblings().not(':first').hide();
     i++;

 });

fiddle here