一个接一个地向类添加类

Question

我有相同类的DIV，最初是通过CSS隐藏的。单击一个按钮时，我想一个接一个地显示它们（添加类）。

任何提示/方向都将受到高度赞赏。谢谢！

$(".add_another").click(function() {
  $(".task").addClass("taskshown"); 
  //Want to add "taskshown" class to the DIVs one after another
})

.task {
  display:none;
}
.taskshown {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tasks">
    <div class = "task" id="task1">
        Task 1
    </div>
    <div class = "task" id="task2">
        Task 2
    </div>
    <div class = "task" id="task3">
        Task 3
    </div>
    <div class = "task" id="task4">
        Task 4
    </div>
    <div class = "task" id="task5">
        Task 5
    </div>
</div>

<a class = "add_another">Add another</a>

Answer 1

使用next()

$(".add_another").click(function() {
       if($('.task:first').is('.taskshown')) {
          $(".taskshown").next().addClass("taskshown"); 
        } else {
          $('.task:first').addClass("taskshown"); 
        }
    });

演示：

＆＃13;

＆＃13;

$(".add_another").click(function() {
  if ($('.task:first').is('.taskshown')) {
    $(".taskshown").next().addClass("taskshown");
  } else {
    $('.task:first').addClass("taskshown");
  }
});

＆＃13;

.task {
  display: none;
}
.taskshown {
  display: block;
}
.add_another {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tasks">
  <div class="task" id="task1">
    Task 1
  </div>
  <div class="task" id="task2">
    Task 2
  </div>
  <div class="task" id="task3">
    Task 3
  </div>
  <div class="task" id="task4">
    Task 4
  </div>
  <div class="task" id="task5">
    Task 5
  </div>
</div>

<a class="add_another">Add another</a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在setTimeout()中使用$.each()。同时编辑您的问题，让jquery中的选择器为$('.another')，因为它是您问题中的拼写错误。

$(".add_another").click(function() {
        $(document).find('.task').each( function(k, v) {
    var el = this;
        setTimeout(function () {
        $(el).addClass("taskshown");
    }, k*1000);
        //Want to add "taskshown" class to the DIVs one after another
    })

    
   
});

 .task {
        display:none;
    }
    .taskshown {
        display:block;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tasks">
    <div class = "task" id="task1">
        Task 1
    </div>
    <div class = "task" id="task2">
        Task 2
    </div>
    <div class = "task" id="task3">
        Task 3
    </div>
    <div class = "task" id="task4">
        Task 4
    </div>
    <div class = "task" id="task5">
        Task 5
    </div>
</div>

<a class = "add_another">Add another</a>

Answer 3

尝试这样，加上Irfan的评论

$(".task").not('.taskshown').first().addClass("taskshown"); 

Answer 4

试试这个：

＆＃34; .add_another＆＃34;注意＆＃34; .add_alother＆＃34;

$(".add_another").click(function() {
        $(".task").addClass("taskshown"); 
        //Want to add "taskshown" class to the DIVs one after another
    })