jQuery绑定函数和(this）用法

jQuery bind function and (this) usage

本文关键字：this 用法 绑定 函数 jQuery      更新时间：2023-09-26
$('.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中有多项选择题，我希望动画在下一个按钮<button class="forward">上触发。

如何将click函数放在.forward元素的第一行，并在列表中保留(this(和next((的进度。

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

Fiddle here：http://jsfiddle.net/stupaul22/JwC65/5/

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

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

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

  1. 将问题和按钮放在单独的容器中，以避免next()选择按钮

  2. 将:last-child和:first-child选择器与:not一起使用，以避免在单击后退按钮时选择第一个问题，在单击前进按钮时选择最后一个问题。

     $('.forward').click(function() {
     $('.active:not(:last-child)').animate({
         left: '-50%'
     }, 500);
     $('.active:not(:last-child)').removeClass('active').next().addClass('active').animate({
         left: '50%'
     }, 500);
 });
 $('.back').click(function() {
     $('.active:not(:first-child)').animate({
         left: '150%'
         }, 500);
     $('.active:not(:first-child)').removeClass('active').prev().addClass('active').animate({
         left: '50%'
     }, 500);
 });
相关文章：