jquery - 单击时按顺序递增 id 名称

Question

这是我正在尝试做的事情:在一个基本的 HTML 页面上，首先只显示一个文本 block ，然后在单击文档时让下一个文本 block 淡入。

例如，开始时只显示 div id="fadeIn-0" 的内容。单击时，div id="fadeIn-1" 的内容淡入。下一次单击时，div id="fadeIn-2" 的内容淡入，等等等等.他们都有fadeIn

类

目前，我的 script.js 看起来像这样:

$(document).ready(function() {
    var counter=0

 $('.fadeIn').each(function(index,par) {
      if(index>0) {
        $(par).hide();

    $(document).click(function() {
       counter+=1;
       $('#fadeIn-'+counter).fadeIn('slow');
     });
});

这行得通，但是当我使用更多的 .fadeIn-#s 时，我希望能够让类名自动递增，而不是在第一次编写页面时手动键入 div 的每个数字。我什至不确定这是否可行，但我认为值得一试!

我真的是 js/jquery 的新手，所以提前感谢您可能获得的任何帮助或指导。

Answer 1

如果它们都具有相同的类 .fadeIn，并且它们在文档中按顺序排列，您可能根本不需要使用它们的 id。

$(document).ready(function() {
    $('.fadeIn').hide();
    $(document).on('click',function() {
        $('.fadeIn:hidden:first').fadeIn('slow');
    })
    .click();
});