Question

我觉得我非常接近完成这件事。我有一个带有“添加儿童”按钮的表单，按下时会显示一个div。该表单隐藏了15个div（＃child1 - #child15）。我让它只显示第一行（＃child1）。

我的问题是，当再次按下该按钮时，下一行（＃child2，＃child3等等）应该出现，我不知道如何让它显示。我尝试放入柜台，但我是jQuery的新手，非常感谢任何帮助。我不认为这是一个困难的问题，只是一个躲避我新手能力的问题。

这是jQuery。如果我需要编辑或添加更多代码来帮助解决问题，请告诉我。提前谢谢！

<script type="text/javascript">
var counter=0

$(document).ready(function() {
    $('#addChildren').click(function() {
        $('#child1').show(function() {
        counter++
        });
      });
    });
</script>

Answer 1

将等级children-to-show添加到您的div #child1 - #child15并写入

<script type="text/javascript">
$(document).ready(function() {
    $('#addChildren').click(function() {
        $('.children-to-show:hidden').first().show();
    });
</script>

这样你就不需要一个计数器，并且div id不必连续，所以你有更多的方法来配置你的div。

<强>解释

每次点击addChildren时，都会显示带有children-to-show类的下一个隐藏元素。

修改

gdoron是对的，所以如果你想让它适用于类：

<script type="text/javascript"> $(document).ready(function() { $('#addChildren').click(function() { $('.children-to-show').not('.is-visible').first().show().addClass('is-visible'); }); </script>

Answer 2

如果<div> s顺序为1,2,3,4 ... 15：

$('#addChildren').click(function() {        
        $('div[id^="child"]').eq(counter).show();
        counter++;
});

如果它们不合适：

$('#addChildren').click(function() {        
        $('#child' + (++counter)).show();
});

Answer 3

如果你知道div的确切数量，你可以使用for循环

$(document).ready(function() {
    $('#addChildren').click(function() {

for (i=1; i<=15; i++)
  {
  $('#child'+i).show();
  }

   });
});

Answer 4

这应该为你做

<script type="text/javascript">
var counter=1

$(document).ready(function() {
    $('#addChildren').click(function() {
        $('#child' + counter).show(function() {
        counter++
        });
      });
    });
</script>

您也可以添加条件来检查15的限制。像...这样的东西。

    <script type="text/javascript">
        var counter=1

        $(document).ready(function() {
            $('#addChildren').click(function() {
                if(counter <= 15) {
$('#child' + counter).show(function() {
                counter++
                });
}
              });
            });
        </script>

Answer 5

您可以将计数器变量连接到jQuery选择器：

<script type="text/javascript">
var counter=0

$(document).ready(function() {
    $('#addChildren').click(function() {
        $('#child' + counter).show(function() {
        counter++
        });
      });
    });
</script>

Answer 6

您需要将div显示为$('#child' + counter)之类的变量，以便在counter的值更新时显示不同的div。

var counter=1

$(document).ready(function() {
    $('#addChildren').click(function() {
        $('#child' + counter).show(function() {
            counter++
        });
    });
});

我把这个demo放在一起给你看。

如何使用jQuery创建多个div

6 个答案: