Javascript 在多步骤表单中单击“上一步”时CSS会发生更改

我正在开发一个电子商务网站，使用Django，并已被删除。在此页面上：，我需要一个多步骤表单，用户可以在其中选择自己的自定义项并继续进行进一步的自定义

虽然图像选择和“下一步”按钮工作正常，但当我单击“上一步”按钮时，CSS或Javascript会发生变化，设计也会中断。我一直试图让它正常工作，但没有运气。请帮忙

谢谢

有关如何重现错误的步骤：
1.转到
2.单击任何图像并将其选中
3.单击下一步
4.在下一步中，单击previous，CSS或JS将发生巨大变化

我的HTML、CSS和Javascript/jQuery是

$（'.images_list li'）。单击（函数（）{
$（'.images_list.selected'）.removeClass（'selected'）；
$（this.toggleClass（'selected'）；
var clicked=$（this.attr（'title'）；
$（“#”+单击）.removeClass（“隐藏”）.sides（）.addClass（“隐藏”）；
});
//jQuery时间
var当前值、下一个值、上一个值//字段集
变量左，不透明度，比例//我们将设置动画的字段集属性
var动画//防止快速多点单击故障的标志
$（“.next”）。单击（函数（）{
如果（动画）返回false；
动画=真；
当前_fs=$（this.parent（）；
next_fs=$（this.parent（）.next（）；
//使用next_fs的索引在progressbar上激活下一步
$（“#progressbar li”）.eq（$（“字段集”）.index（next_fs））.addClass（“活动”）；
//显示下一个字段集
next_fs.show（）；
//使用样式隐藏当前字段集
当前动画（{opacity:0}{
步骤：函数（现在是mx）{
//随着当前_fs的不透明度降低到0-存储在“now”中
//1.将电流放大至80%
比例=1-（1-现在）*0.2；
//2.从右侧带下一个_fs（50%）
左=（现在是*50）+“%”；
//3.当下一个_fs移入时，将其不透明度增加到1
不透明度=1-现在；
当前_fs.css({
“转换”：“缩放（“+scale+”），
“位置”：“绝对”
});
css（{'left'：left'opacity'：opacity}）；
},
持续时间：500，
完成：函数（）{
当前_fs.hide（）；
动画=假；
},
//这来自自定义的放松插件
放松：“轻松返回”
});
});
$（“.previous”）。单击（函数（）{
如果（动画）返回false；
动画=真；
当前_fs=$（this.parent（）；
previous_fs=$（this.parent（）.prev（）；
//取消激活progressbar上的当前步进
$（“#progressbar li”）.eq（$（“字段集”）.index（当前#fs））.removeClass（“活动”）；
//显示上一个字段集
先前的_fs.show（）；
//使用样式隐藏当前字段集
当前动画（{opacity:0}{
步骤：函数（现在是mx）{
//随着当前_fs的不透明度降低到0-存储在“now”中
//1.将以前的_fs从80%扩展到100%
比例=0.8+（1-现在）*0.2；
//2.将当前_fs向右移动（50%）-从0%
左=（（1-现在）*50）+“%”；
//3.移动前一个_fs时，将其不透明度增加为1
不透明度=1-现在；
当前的_fs.css（{'left'：left}）；
以前的{'transform'：'scale（'+scale+'），'opacity'：opacity}）；
},
持续时间：0，
完成：函数（）{
当前_fs.hide（）；
动画=假；
},
//这来自自定义的放松插件
放松：“轻松返回”
});
});
$（“.submit”）。单击（函数（）{
返回false；
});
#msform{
宽度：400px；
保证金：50px自动；
文本对齐：居中；
位置：相对位置；
}
#msform字段集{
背景：白色；
边界：0无；
边界半径：3px*/
盒影：0.15px 1px rgba（0,0,0,0.4）；
填充：20px 30px；
框大小：边框框；
宽度：80%；
利润率：0.10%；
/*将场集堆叠在彼此上方*/
位置：相对位置；
}
/*隐藏除第一个字段集以外的所有字段集*/
#msform字段集：非（：类型的第一个）{
显示：无；
}
/*投入*/
#msform输入，#msform文本区域{
填充：15px；
边框：1px实心#ccc；
边界半径：3px；
边缘底部：10px；
宽度：100%；
框大小：边框框；
字体系列：蒙特塞拉特；
颜色：#2C3E50；
字体大小：13px；
}
/*钮扣*/
#msform.action按钮{
宽度：100px；
背景：#27AE60；
字体大小：粗体；
颜色：白色；
边界：0无；
边界半径：1px；
光标：指针；
填充：10px 5px；
利润率：10px 5px；
}
#msform.action按钮：悬停，#msform.action按钮：焦点{
盒影：0 2倍白色，0 0 3倍#27AE60；
}
/*标题*/
.fs标题{
字体大小：15px；
文本转换：大写；
颜色：#2C3E50；
边缘底部：10px；
}
.fs副标题{
字体大小：正常；
字体大小：13px；
颜色：#666；
边缘底部：20px；
}
/*进度条*/
#进度条{
边缘底部：30px；
溢出：隐藏；
/*CSS计数器对步骤进行编号*/
计数器复位：步骤；
}
#李国宝{
列表样式类型：无；
颜色：黑色；
文本转换：大写；
字体大小：9px；
宽度：100px；
浮动：左；
位置：相对位置；
}
#李：以前{
内容：计数器（步骤）；
反增量：步进；
宽度：20px；
线高：20px；
显示：块；
字体大小：10px；
颜色：#333；
背景：白色；
边界半径：3px；
保证金：0自动5px自动；
}
/*progressbar连接器*/
#李：之后呢{
内容：''；
宽度：100%；
高度：2倍；
背景：白色；
位置：绝对位置；
左-50%；
顶部：9px；
z索引：-1；/*将其放在数字后面*/
}
#李：第一个孩子：之后{
/*第一步之前不需要接头*/
内容：无；
}
/*将活动/完成的步骤标记为绿色*/
/*台阶和台阶前的接头编号=绿色*/
#progressbar li.活动：之前，#progressbar li.活动：之后{
背景：#27AE60；
颜色：白色；
}
.images_list li{
列表样式：无；
浮动：左；
右边距：10px；
}
.images_list li span{
显示：无；
位置：绝对位置；
顶部：150px；
左：30px；
宽度：24px；
高度：24px；
}
.边界{
边界：0；
背景：url（upload/check.jpg）；
}
.选定{
边框：3倍纯红；
P
previous_fs.css({'transform': 'scale('+scale+')', 'position':'relative','opacity': opacity});