javascript - jquery在每个点击事件中一一显示div

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>

在这段代码中，我需要为每个点击事件一个一个地显示 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

将 id 更改为 class，就像其他人所说的那样，如果您需要循环显示/隐藏。那么这可能会派上用场

 $('.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++;

 });

在这里摆弄

Answer 5

代替<div id="toAdd"> with <div class="toAdd">

并这样做

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