Javascript jQuery。使有生气数组。变量。选择器。下一个/上一个按钮

我试图创建一个乐高教学动画

我声明了变量，它们是选项和计数，所以我需要按顺序选择它来设置动画。（但我不知道如何将变量称为选择器。）当我单击两个按钮“下一步”和“上一步”时

我还需要设置“重置”按钮以转到第一页

任何帮助都将不胜感激。多谢各位

---

在您的情况下，请尝试以下代码重置动画

// Reset animation
reset.click(function(){
    for (i = cnt; i >= 1; i--) {
      e = $('.components').find('img')[i];
      $("#" + e.id).stop().animate({ top: top }, {
        complete: function() { $(this).removeAttr('style') }
      });
      $("#" + e.id).removeAttr("style");
    }
    init();
});

Jquery

var e;
var top;
var cnt = 0;
var next = $('.next'); 
var back = $('.back');
var reset = $('.reset');
function init(){
  cnt = 0;
  back.addClass( "disable" );
  next.removeClass( "disable" );
  reset.addClass( "disable" );
}
var eleCnt = $('.components').find('img').length;
init();
$(document).ready(function(){
  reset.click(function(){
    for (i = cnt; i >= 1; i--) {
      e = $('.components').find('img')[i];
      $("#" + e.id).stop().animate({ top: top }, {
        complete: function() { $(this).removeAttr('style') }
      });
      $("#" + e.id).removeAttr("style");
    }
    init();
  });
  next.click(function(){
    back.removeClass( "disable" );
    reset.removeClass( "disable" );
    if(eleCnt > cnt){
      cnt += 1; 
      if(cnt==eleCnt-1){
        next.addClass( "disable" );
      }
      e = $('.components').find('img')[cnt];
      if(e){
        top=$("#" + e.id).css('top');
        $("#" + e.id).animate({top: '248px'});
      } else {
        cnt -= 1; 
      }
    }
  });

  back.click(function(){
    if(cnt > 0){
      if(cnt == 1){
        back.addClass( "disable" );
        reset.addClass( "disable" );
      } else {
        next.removeClass( "disable" );
        back.removeClass( "disable" );
      }
      e = $('.components').find('img')[cnt];
    }
    if(e){
      $("#" + e.id).stop().animate({ top: top }, {
        complete: function() { $(this).removeAttr('style') }
      });
      $("#" + e.id).removeAttr("style"); 
      if(cnt > 0){cnt -= 1;}
    }
  });
});

以下是工作代码：

---

我认为这应该对你有帮助。

你能不能也发布html代码，这会有帮助。

var e;
var top;
var cnt = 0;
var next = $('.next'); 
var back = $('.back');
var reset = $('.reset');
function init(){
  cnt = 0;
  back.addClass( "disable" );
  next.removeClass( "disable" );
  reset.addClass( "disable" );
}
var eleCnt = $('.components').find('img').length;
init();
$(document).ready(function(){
  reset.click(function(){
    for (i = cnt; i >= 1; i--) {
      e = $('.components').find('img')[i];
      $("#" + e.id).stop().animate({ top: top }, {
        complete: function() { $(this).removeAttr('style') }
      });
      $("#" + e.id).removeAttr("style");
    }
    init();
  });
  next.click(function(){
    back.removeClass( "disable" );
    reset.removeClass( "disable" );
    if(eleCnt > cnt){
      cnt += 1; 
      if(cnt==eleCnt-1){
        next.addClass( "disable" );
      }
      e = $('.components').find('img')[cnt];
      if(e){
        top=$("#" + e.id).css('top');
        $("#" + e.id).animate({top: '248px'});
      } else {
        cnt -= 1; 
      }
    }
  });

  back.click(function(){
    if(cnt > 0){
      if(cnt == 1){
        back.addClass( "disable" );
        reset.addClass( "disable" );
      } else {
        next.removeClass( "disable" );
        back.removeClass( "disable" );
      }
      e = $('.components').find('img')[cnt];
    }
    if(e){
      $("#" + e.id).stop().animate({ top: top }, {
        complete: function() { $(this).removeAttr('style') }
      });
      $("#" + e.id).removeAttr("style"); 
      if(cnt > 0){cnt -= 1;}
    }
  });
});