jQuery绑定函数和(此)用法

Question

$('.box').click(function () {

    $(this).animate({
        left: '-50%'
    }, 500, function () {
        $(this).css('left', '150%');
        $(this).appendTo('#container');
    });

    $(this).next().animate({
        left: '50%'
    }, 500);
});

这段代码完美地在屏幕上一个接一个地为无限的<div class="box">提供动画效果。可以单击div上的任意位置以使其具有动画效果。在这些div中有多项选择题，我希望动画在next按钮<button class="forward">上触发。

如何将单击函数放在.forward元素的第一行，同时仍然保留列表中的(this)和next()行进。

似乎我需要将html元素切换为第2行中的.box (现在为空)。

小提琴在这里：http://jsfiddle.net/stupaul22/JwC65/5/

Answer 1

试试这个：http://jsfiddle.net/Q39YX/2/

我向当前活动问题添加了一个active类，并将其用作选择器而不是this。

编辑：我添加了以下内容：

1. 将问题和按钮放在单独的容器中，以避免让next()选择按钮。
2. 将:last-child和:first-child选择器与:not一起使用，以避免在单击后退按钮时选择第一个问题，并在单击前进按钮时选择最后一个问题。

$(‘.forward’).click(.active:not(){$(‘.active:not(：last-.forward)’).animate({ left：'-50%‘}，500)；left left：'50%’}，500)；})；$(‘.back’).click(.active:not(){$(‘.active:not(：first-.back)’)left({ left：'150%‘}，500)；$('.active:not(:first-child)').removeClass('active').prev().addClass('active').animate({ left：'50%’}，500)；});