按单击顺序递增id名称

Question

下面是我要做的:在一个基本的HTML页面上，从只显示一个文本块开始，在文档单击时，让下一个文本块淡入。

例如，从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();
});

Answer 2

你在找这样的东西吗？

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

  //$(par).addClass('fadeIn-'+index);
  $(par).attr('id', 'fadeIn-'+index);

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