jquery - 使用 skip 一次只显示一个元素

Question

我想做的是，一次只显示一个任务。如果用户单击跳过，则显示下一个...它可能是 3 个任务列表到 30 个任务列表。

那么如何一次显示一个？

$("a#skip").click(function() {
    $('#id_task_{{i.id}}').hide('slide', { direction: 'left' }, 400);
}; 

<div id="reload">
    <div class="task" id="id_task_1">
        <a href="link to task" class="image">
            Task 1
        </a>
        <a class="skip_class" id="skip">Skip</a>
    </div>
    <div class="task" id="id_task_2">
        <a href="link to task" class="image">
            Task 2
        </a>
        <a class="skip_class" id="skip">Skip</a>
    </div>
</div>

Fiddle here了解我正在使用的东西。感谢您的帮助。

Answer 1

你可以试试这样的东西

// Add a class called hide to all the div with class task to hide it on page load

$(".skip_class").click(function () {
    var $currTask = $(this).closest('.task');
    // Show the next task
    $currTask.nextAll('.task').first().removeClass('hide');
    // Hide the current task
    $currTask.hide('slide', {
        direction: 'left'
    }, 400);
});

Check Fiddle