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').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');
 });

Answer 2

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

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

单击时按顺序递增ID名称

2 个答案: