1

我想要做的是，一次只显示一个任务。如果用户点击跳过，显示下一个......它可能是 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>

在这里摆弄一下以了解我正在使用的东西。谢谢您的帮助。

4

4 回答 4

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

检查小提琴

于 2013-07-12T22:39:50.403 回答
0

您可以使用 css 隐藏除第一个任务之外的所有任务并在单击时显示 em：

.task {
   display: none;   
}
#reload .task:first-child {
   display: block;   
}

...

$("a.skip_class").click(function() {
   var task = $(this).parent();
   task.hide();
   task.next().show();
   if(task.next().attr('id') === undefined) {
     task.parent().children('.task:first').show();   
)};

http://jsfiddle.net/fAszU/1/

正如@Sushanth 提到的，您需要用于幻灯片效果的 jQuery 效果核心插件。

于 2013-07-12T22:46:37.507 回答
0

这有帮助吗？

$(document).ready(function(){
    $("a.skip_class").click(function() {
    $(this).parent().hide();
    $(this).parent().next('.task').show();
    });
 });

http://jsfiddle.net/rGvna/17/

于 2013-07-12T23:29:04.673 回答
0

在这里工作的小提琴：http: //jsfiddle.net/rGvna/14/

我建议在包含相应页码的 .task 元素上使用数据属性。

<div id="reload">
    <div class="task" data-task-num="1">
        <a href="link to task" class="image">
            Task 1
        </a>
    </div>
    <div class="task" data-task-num="2">
        <a href="link to task" class="image">
            Task 2
        </a>
    </div>
    <div class="task" data-task-num="3">
        <a href="link to task" class="image">
            Task 3
        </a>
    </div>
    <div class="task" data-task-num="4">
        <a href="link to task" class="image">
            Task 4
        </a>
    </div>    
</div>
<a class="skip_class" id="skip">Skip</a>

然后使用 jQuery show(), hide() 方法循环执行如下任务：

var starting_task = 1;
var last_task  = 4;
var skip_to_task = function(task_num) {
        $('.task').hide();
        $('.task[data-task-num=' + task_num +']').show();
        if (task_num < last_task) {
            $("#skip").data('target-task', task_num + 1);    
        }
    };

skip_to_task(starting_task); // go to first task by default

$("#skip").click(function(e) {
    var target_task = $(e.target).data('target-task');
    skip_to_task(target_task);
});
于 2013-07-12T22:50:03.670 回答