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 =“添加”更改为class =“to Add”

Answer 3

正如其他人所说，你需要将id="toAdd"更改为“class =”toAdd“。

然后，您可以使用以下内容显示第一个未隐藏的DIV：

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

FIDDLE

Answer 4

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

并执行此操作

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

Answer 5

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

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

jquery每个click事件逐个显示div

5 个答案: