如何在下一步单击时以多步形式跳过一个字段集
How to skip one fieldset in a multistep form on next step click
我已经浪费了整整 2 天时间来解决这个问题。首先，我们将不胜感激！
我有一个多步骤表单（由字段集拆分），当我单击下一步时，它们会显示下一个字段集并返回上一个按钮。
我在第二个字段集中有一个按钮可以启用一个附加地址，当我不单击此按钮时，我遇到了一些跳过此字段集的问题。
我试过使用next_fs = $(this).parent().nextAll().eq(3)；跳转附加地址的字段集，但似乎不起作用。
现在我的方法是（我知道这不是最好的方法，但我正在努力解决这个问题）是当我单击此按钮以启用附加地址时，我将 insertAfter() 字段集的全部内容 (在一个字符串中声明）进入 DOM。但是现在的问题是上一个和下一个按钮停止工作了！！
https://jsfiddle.net/byvxzb89/2/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prototype UI - Teste DNA</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Oswald:400,700|Raleway:400,500,600,700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row container-topo-compra">
<div class="col-lg-6 col-md-6 hidden-xs hidden-sm">
<div class="info">
<h1>Ambiente de compra e pagamento</h1>
<div class="spoilers">
Cadastre seus dados para que possamos finalizar a compra</a>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" id="header">
<i class="fa fa-lock locker" aria-hidden="true"></i><h3> Você está em um ambiente seguro </h3>
<p>Todas as informações aqui inseridas estão seguras e criptografadas.</p>
</div>
</div>
</div>
<div class="container">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
<form class="steps" accept-charset="UTF-8" enctype="multipart/form-data" novalidate="">
<ul id="progressbar">
<li class="dados-pessoais active">Dados Pessoais</li>
<li class="endereco1">Endereços</li>
<li>Pagamento</li>
</ul>
<!-- USER INFORMATION FIELD SET -->
<fieldset id="dados-pessoais">
<h2 class="fs-title">Dados Pessoais</h2>
<h3 class="fs-subtitle">Nós precisamos de alguns dados para dar prosseguimento a esta compra</h3>
<div class="hs_firstname field hs-form-field">
<label for="firstname">Qual o seu primeiro nome? *</label>
<input id="firstname" name="firstname" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor inclue seu nome" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="hs_email field hs-form-field">
<label for="email">Qual seu e-mail? *</label>
<input id="email" name="email" required="required" type="email" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor entre com email válido" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="hs_email field hs-form-field hs_total_number_of_constituents_in_your_database">
<label for="password">Defina uma senha *</label>
<input id="password" class="form-text hs-input" name="password" required="required" size="12" maxlength="128" type="password" value="" placeholder="" data-rule-required="true" data-msg-required="Entre com valores válidos" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="hs_email field hs-form-field hs_total_number_of_constituents_in_your_database">
<label for="conf_password">Repita a senha *</label>
<input id="conf_password" class="form-text hs-input" name="conf_password" required="required" size="12" maxlength="128" type="password" value="" placeholder="" data-rule-required="true" data-msg-required="Entre com valores válidos" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<input type="button" data-page="1" name="next" class="next action-button next-1" value="Proximo" />
</fieldset>
<!-- ENDEREÇOS FIELDSET -->
<fieldset id="endereco">
<h2 class="fs-title">Endereço</h2>
<h3 class="fs-subtitle"><i class="fa fa-info-circle font-big" aria-hidden="true"></i>Você pode optar por receber os kits de coletas em endereços diferentes</h3>
<button type="button" class="novo-endereco"><i class="fa fa-plus font-big" aria-hidden="true"></i>Novo Endereço</button>
<div class="relacaoKits">
<p> O que deseja enviar para esse endereço? </p>
<div class="kit kit01" data="1"><i class="fa fa-circle-o"></i>Kit 01: Suposta Mãe</div>
<div class="kit kit02 ativo" data="2"><i class="fa fa-check-circle"></i>Kit 02: Suposto Filho</div>
<div class="kit kit02 ativo" data="2"><i class="fa fa-check-circle"></i>Kit 03: Suposto Pai</div>
</div>
<div class="form-item " id="">
<label for="remetente1">Remetente</label>
<input id="remetente1" class="form-text hs-input" name="remetente1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Não é aceito valores em branco">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">
<label for="cep1">CEP</label>
<input id="cep1" class="form-text hs-input" name="cep1" required="required" size="60" maxlength="128" type="number" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira um número válido">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">
<label for="rua1">Rua/Av.:</label>
<input id="rua1" class="form-text hs-input" name="rua1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira um endereço válido">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">
<label for="numero-complemento1">Número e complemento</label>
<input id="numero-complemento1" class="form-text hs-input" name="numero-complemento1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira um valor válido">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">
<label for="bairro1">Bairro</label>
<input id="bairro1" class="form-text hs-input" name="bairro1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira um bairro">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">
<label for="cidade1">Cidade</label>
<input id="cidade1" class="form-text hs-input" name="cidade1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira uma cidade válida">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">
<label for="UF1">UF</label>
<input id="UF1" class="form-text hs-input" name="UF1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Unidade Federativa">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">
<label for="telefone1">Telefone</label>
<input id="telefone1" class="form-text hs-input" name="telefone1" required="required" size="11" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira um telefone">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<input type="button" data-page="1" name="previous" class="previous action-button" value="Anterior" />
<input type="button" data-page="3" name="next" class="next action-button next-2" value="Proximo" />
</fieldset>
<!-- Pagamento FIELDSET -->
<fieldset id="pagamento">
<h2 class="fs-title">Cultivation and Nurturing your Donors</h2>
<h3 class="fs-subtitle">How have you been nurturing donors to get better donations?</h3>
<!-- Begin Average Gift Size in Year 1 Field -->
<div class="form-item webform-component webform-component-textfield hs_average_gift_size_in_year_1 field hs-form-field" id="edit-submitted-cultivation-amount-1 average_gift_size_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_3256">
<label for="edit-submitted-cultivation-amount-1 average_gift_size_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_3256">What was your average gift size in year 1? *</label>
<input id="edit-submitted-cultivation-amount-1" class="form-text hs-input" name="average_gift_size_in_year_1" required="required" size="60" maxlength="128" type="number" value="" placeholder="" data-rule-required="true" data-msg-required="Please enter a valid number">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item webform-component webform-component-textfield hs_average_gift_size_in_year_2 field hs-form-field" id="webform-component-cultivation--amount-2">
<label for="edit-submitted-cultivation-amount-2 average_gift_size_in_year_2-99a6d115-5e68-4355-a7d0-529207feb0b3_3256">What was your average gift size in year 2? *</label>
<input id="edit-submitted-cultivation-amount-2" class="form-text hs-input" name="average_gift_size_in_year_2" required="required" size="60" maxlength="128" type="number" value="" placeholder="" data-rule-required="true" data-msg-required="Please enter a valid number">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<input type="button" data-page="3" name="previous" class="previous action-button" value="Previous" />
<input type="button" data-page="3" name="next" class="next action-button" value="Confirmar Compra" />
</fieldset>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
JS
/*
*
* Plug-ins: jQuery Validate, jQuery
* Easing
*/
$(document).ready(function() {
var fieldsetEndereco2="";
fieldsetEndereco2 += " <fieldset id=\"endereco2\">";
fieldsetEndereco2 += " <h2 class=\"fs-title\">Endereço<\/h2>";
fieldsetEndereco2 += " <h3 class=\"fs-subtitle\"><i class=\"fa fa-info-circle font-big\" aria-hidden=\"true\"><\/i>Você pode optar por receber os kits de coletas em endereços diferentes<\/h3>";
fieldsetEndereco2 += " <div class=\"relacaoKits\">";
fieldsetEndereco2 += " <p> O que deseja enviar para esse endereço? <\/p>";
fieldsetEndereco2 += " <div class=\"kit kit01\" data=\"1\"><i class=\"fa fa-circle-o\"><\/i>Kit 01: Suposta Mãe<\/div>";
fieldsetEndereco2 += " <div class=\"kit kit02 ativo\" data=\"2\"><i class=\"fa fa-check-circle\"><\/i>Kit 02: Suposto Filho<\/div>";
fieldsetEndereco2 += " <div class=\"kit kit02 ativo\" data=\"2\"><i class=\"fa fa-check-circle\"><\/i>Kit 03: Suposto Pai<\/div>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item \" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"remetente2\">Remetente<\/label>";
fieldsetEndereco2 += " <input id=\"remetente2\" class=\"form-text hs-input\" name=\"remetente2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Não é aceito valores em branco\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"cep2\">CEP<\/label>";
fieldsetEndereco2 += " <input id=\"cep2\" class=\"form-text hs-input\" name=\"cep2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"number\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Por favor insira um número válido\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"rua2\">Rua\/Av.:<\/label>";
fieldsetEndereco2 += " <input id=\"rua2\" class=\"form-text hs-input\" name=\"rua2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Por favor insira um endereço válido\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"numero-complemento2\">Número e complemento<\/label>";
fieldsetEndereco2 += " <input id=\"numero-complemento2\" class=\"form-text hs-input\" name=\"numero-complemento2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Por favor insira um valor válido\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"bairro2\">Bairro<\/label>";
fieldsetEndereco2 += " <input id=\"bairro2\" class=\"form-text hs-input\" name=\"bairro2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Por favor insira um bairro\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"cidade2\">Cidade<\/label>";
fieldsetEndereco2 += " <input id=\"cidade2\" class=\"form-text hs-input\" name=\"cidade2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Por favor insira uma cidade válida\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"UF2\">UF<\/label>";
fieldsetEndereco2 += " <input id=\"UF2\" class=\"form-text hs-input\" name=\"UF2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Unidade Federativa\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"telefone2\">Telefone<\/label>";
fieldsetEndereco2 += " <input id=\"telefone2\" class=\"form-text hs-input\" name=\"telefone2\" required=\"required\" size=\"11\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Insira um telefone\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <input type=\"button\" data-page=\"2\" name=\"previous\" class=\"previous action-button\" value=\"Anterior\" \/>";
fieldsetEndereco2 += " <input type=\"button\" data-page=\"4\" name=\"next\" class=\"next action-button\" value=\"Proximo\" \/>";
fieldsetEndereco2 += " <\/fieldset>";
var current_fs, next_fs, previous_fs;
var left, opacity, scale;
var animating;
$(".next-1").click(function() {
$(".steps").validate({
errorClass: 'invalid',
errorElement: 'span',
rules: {
password: {
minlength: 6,
maxlength: 12,
},
conf_password: {
minlength: 6,
maxlength: 12,
equalTo: "#password"
},
telefone1: {
number: true
},
},
messages: {
email: {
email: " Por favor entre com um formato válido de e-mail",
},
password: {
minlength: "Por favor entre com no mínimo 6 caracteres",
maxlength: "Limite de 12 caracteres",
},
conf_password: {
equalTo: "As senhas são diferentes",
minlength: "Por favor entre com no mínimo 6 caracteres",
maxlength: "Limite de 12 caracteres",
},
telefone1: {
number: "Por favor insira um número de telefone",
},
},
errorPlacement: function(error, element) {
error.insertAfter(element.next('span').children());
},
highlight: function(element) {
$(element).next('span').show();
},
unhighlight: function(element) {
$(element).next('span').hide();
}
});
});
$(".next-1").click(function() {
$("#dados-pessoais").validate({
errorClass: 'invalid',
errorElement: 'span',
errorPlacement: function(error, element) {
error.insertAfter(element.next('span').children());
},
highlight: function(element) {
$(element).next('span').show();
},
unhighlight: function(element) {
$(element).next('span').hide();
}
});
});
$(".novo-endereco").click(function() {
var endereco1 = $("#progressbar").find(".endereco1");
if ($(".novo-endereco").text() == "Novo Endereço") {
endereco1.text("endereço 1");
$("#endereco .fs-title").text("Endereço Principal");
$("<li class='endereco2'>Endereço 2</li>").insertAfter(endereco1);
$(fieldsetEndereco2).insertAfter("#endereco");
$(".novo-endereco").html("Desfazer");
previous_fs = $("#endereco");
next_fs = $("#pagamento");
} else {
$(".endereco2").remove();
$("#endereco2").remove();
endereco1.text("endereço");
$("#endereco .fs-title").text("Endereço");
$(".novo-endereco").html("<i class='fa fa-plus font-big' aria-hidden='true'></i>Novo Endereço");
// $("#endereco2").hide();
}
});
$(".kit").click(function() {
$(this).addClass("ativo");
if ($(this).hasClass("ativo")) {
$(this).children("i").toggleClass("fa-circle-o fa-check-circle")
// $(this).prepend("<i class='fa fa-check-circle'></i>");
}
});
$(".next").click(function() {
$(".steps").validate({
errorClass: 'invalid',
errorElement: 'span',
errorPlacement: function(error, element) {
error.insertAfter(element.next('span').children());
},
highlight: function(element) {
$(element).next('span').show();
},
unhighlight: function(element) {
$(element).next('span').hide();
}
});
if ((!$('.steps').valid())) {
return true;
}
if (animating) return false;
animating = true;
current_fs = $(this).parent();
// if($(".endereco1.active").length > 0){
// if($('#endereco2').is(":visible") == true){
// next_fs = $(this).parent().next();
// }
// else {
// next_fs = $(this).parent().next(
// }
// }if($(".dados-pessoais.active").length > 0){
next_fs = $(this).parent().next();
console.log(next_fs);
// }
console.log(next_fs);
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
next_fs.show();
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
scale = 1 - (1 - now) * 0.2;
left = (now * 50) + "%";
opacity = 1 - now;
current_fs.css({
'transform': 'scale(' + scale + ')'
});
next_fs.css({
'left': left,
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
easing: 'easeInOutExpo'
});
});
$(".submit").click(function() {
$(".steps").validate({
errorClass: 'invalid',
errorElement: 'span',
errorPlacement: function(error, element) {
error.insertAfter(element.next('span').children());
},
highlight: function(element) {
$(element).next('span').show();
},
unhighlight: function(element) {
$(element).next('span').hide();
}
});
if ((!$('.steps').valid())) {
return false;
}
if (animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
next_fs.show();
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
scale = 1 - (1 - now) * 0.2;
left = (now * 50) + "%";
opacity = 1 - now;
current_fs.css({
'transform': 'scale(' + scale + ')'
});
next_fs.css({
'left': left,
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
easing: 'easeInOutExpo'
});
});
$(".previous").click(function() {
if (animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
previous_fs.show();
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
scale = 0.8 + (1 - now) * 0.2;
left = ((1 - now) * 50) + "%";
opacity = 1 - now;
current_fs.css({
'left': left
});
previous_fs.css({
'transform': 'scale(' + scale + ')',
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
easing: 'easeInOutExpo'
});
});
});
请在大于 675px 的分辨率下验证 jsfiddle 代码
根据 jquery 文档：
The .on() method attaches event handlers to the currently selected set
of elements in the jQuery object.
换句话说，当您向页面添加动态内容时，.on() 方法的工作方式类似于 event listener。
在 jQuery 1.7 之前使用 .live() 方法，但已弃用。
您应该替换这些行：
$(".next").click(function() {
有了这个：
$(document).on("click",".next",function(){
对以前的做同样的事情：
$(".previous").click(function() {
有了这个
$(document).on("click",".previous",function(){
我已经浪费了整整 2 天时间来解决这个问题。首先，我们将不胜感激！
我有一个多步骤表单（由字段集拆分），当我单击下一步时，它们会显示下一个字段集并返回上一个按钮。
我在第二个字段集中有一个按钮可以启用一个附加地址，当我不单击此按钮时，我遇到了一些跳过此字段集的问题。
我试过使用next_fs = $(this).parent().nextAll().eq(3)；跳转附加地址的字段集，但似乎不起作用。
现在我的方法是（我知道这不是最好的方法，但我正在努力解决这个问题）是当我单击此按钮以启用附加地址时，我将 insertAfter() 字段集的全部内容 (在一个字符串中声明）进入 DOM。但是现在的问题是上一个和下一个按钮停止工作了！！
https://jsfiddle.net/byvxzb89/2/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prototype UI - Teste DNA</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Oswald:400,700|Raleway:400,500,600,700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row container-topo-compra">
<div class="col-lg-6 col-md-6 hidden-xs hidden-sm">
<div class="info">
<h1>Ambiente de compra e pagamento</h1>
<div class="spoilers">
Cadastre seus dados para que possamos finalizar a compra</a>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" id="header">
<i class="fa fa-lock locker" aria-hidden="true"></i><h3> Você está em um ambiente seguro </h3>
<p>Todas as informações aqui inseridas estão seguras e criptografadas.</p>
</div>
</div>
</div>
<div class="container">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
<form class="steps" accept-charset="UTF-8" enctype="multipart/form-data" novalidate="">
<ul id="progressbar">
<li class="dados-pessoais active">Dados Pessoais</li>
<li class="endereco1">Endereços</li>
<li>Pagamento</li>
</ul>
<!-- USER INFORMATION FIELD SET -->
<fieldset id="dados-pessoais">
<h2 class="fs-title">Dados Pessoais</h2>
<h3 class="fs-subtitle">Nós precisamos de alguns dados para dar prosseguimento a esta compra</h3>
<div class="hs_firstname field hs-form-field">
<label for="firstname">Qual o seu primeiro nome? *</label>
<input id="firstname" name="firstname" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor inclue seu nome" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="hs_email field hs-form-field">
<label for="email">Qual seu e-mail? *</label>
<input id="email" name="email" required="required" type="email" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor entre com email válido" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="hs_email field hs-form-field hs_total_number_of_constituents_in_your_database">
<label for="password">Defina uma senha *</label>
<input id="password" class="form-text hs-input" name="password" required="required" size="12" maxlength="128" type="password" value="" placeholder="" data-rule-required="true" data-msg-required="Entre com valores válidos" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="hs_email field hs-form-field hs_total_number_of_constituents_in_your_database">
<label for="conf_password">Repita a senha *</label>
<input id="conf_password" class="form-text hs-input" name="conf_password" required="required" size="12" maxlength="128" type="password" value="" placeholder="" data-rule-required="true" data-msg-required="Entre com valores válidos" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<input type="button" data-page="1" name="next" class="next action-button next-1" value="Proximo" />
</fieldset>
<!-- ENDEREÇOS FIELDSET -->
<fieldset id="endereco">
<h2 class="fs-title">Endereço</h2>
<h3 class="fs-subtitle"><i class="fa fa-info-circle font-big" aria-hidden="true"></i>Você pode optar por receber os kits de coletas em endereços diferentes</h3>
<button type="button" class="novo-endereco"><i class="fa fa-plus font-big" aria-hidden="true"></i>Novo Endereço</button>
<div class="relacaoKits">
<p> O que deseja enviar para esse endereço? </p>
<div class="kit kit01" data="1"><i class="fa fa-circle-o"></i>Kit 01: Suposta Mãe</div>
<div class="kit kit02 ativo" data="2"><i class="fa fa-check-circle"></i>Kit 02: Suposto Filho</div>
<div class="kit kit02 ativo" data="2"><i class="fa fa-check-circle"></i>Kit 03: Suposto Pai</div>
</div>
<div class="form-item " id="">
<label for="remetente1">Remetente</label>
<input id="remetente1" class="form-text hs-input" name="remetente1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Não é aceito valores em branco">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">
<label for="cep1">CEP</label>
<input id="cep1" class="form-text hs-input" name="cep1" required="required" size="60" maxlength="128" type="number" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira um número válido">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">
<label for="rua1">Rua/Av.:</label>
<input id="rua1" class="form-text hs-input" name="rua1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira um endereço válido">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">
<label for="numero-complemento1">Número e complemento</label>
<input id="numero-complemento1" class="form-text hs-input" name="numero-complemento1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira um valor válido">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">
<label for="bairro1">Bairro</label>
<input id="bairro1" class="form-text hs-input" name="bairro1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira um bairro">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">
<label for="cidade1">Cidade</label>
<input id="cidade1" class="form-text hs-input" name="cidade1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira uma cidade válida">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">
<label for="UF1">UF</label>
<input id="UF1" class="form-text hs-input" name="UF1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Unidade Federativa">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">
<label for="telefone1">Telefone</label>
<input id="telefone1" class="form-text hs-input" name="telefone1" required="required" size="11" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira um telefone">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<input type="button" data-page="1" name="previous" class="previous action-button" value="Anterior" />
<input type="button" data-page="3" name="next" class="next action-button next-2" value="Proximo" />
</fieldset>
<!-- Pagamento FIELDSET -->
<fieldset id="pagamento">
<h2 class="fs-title">Cultivation and Nurturing your Donors</h2>
<h3 class="fs-subtitle">How have you been nurturing donors to get better donations?</h3>
<!-- Begin Average Gift Size in Year 1 Field -->
<div class="form-item webform-component webform-component-textfield hs_average_gift_size_in_year_1 field hs-form-field" id="edit-submitted-cultivation-amount-1 average_gift_size_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_3256">
<label for="edit-submitted-cultivation-amount-1 average_gift_size_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_3256">What was your average gift size in year 1? *</label>
<input id="edit-submitted-cultivation-amount-1" class="form-text hs-input" name="average_gift_size_in_year_1" required="required" size="60" maxlength="128" type="number" value="" placeholder="" data-rule-required="true" data-msg-required="Please enter a valid number">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item webform-component webform-component-textfield hs_average_gift_size_in_year_2 field hs-form-field" id="webform-component-cultivation--amount-2">
<label for="edit-submitted-cultivation-amount-2 average_gift_size_in_year_2-99a6d115-5e68-4355-a7d0-529207feb0b3_3256">What was your average gift size in year 2? *</label>
<input id="edit-submitted-cultivation-amount-2" class="form-text hs-input" name="average_gift_size_in_year_2" required="required" size="60" maxlength="128" type="number" value="" placeholder="" data-rule-required="true" data-msg-required="Please enter a valid number">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<input type="button" data-page="3" name="previous" class="previous action-button" value="Previous" />
<input type="button" data-page="3" name="next" class="next action-button" value="Confirmar Compra" />
</fieldset>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
JS
/*
*
* Plug-ins: jQuery Validate, jQuery
* Easing
*/
$(document).ready(function() {
var fieldsetEndereco2="";
fieldsetEndereco2 += " <fieldset id=\"endereco2\">";
fieldsetEndereco2 += " <h2 class=\"fs-title\">Endereço<\/h2>";
fieldsetEndereco2 += " <h3 class=\"fs-subtitle\"><i class=\"fa fa-info-circle font-big\" aria-hidden=\"true\"><\/i>Você pode optar por receber os kits de coletas em endereços diferentes<\/h3>";
fieldsetEndereco2 += " <div class=\"relacaoKits\">";
fieldsetEndereco2 += " <p> O que deseja enviar para esse endereço? <\/p>";
fieldsetEndereco2 += " <div class=\"kit kit01\" data=\"1\"><i class=\"fa fa-circle-o\"><\/i>Kit 01: Suposta Mãe<\/div>";
fieldsetEndereco2 += " <div class=\"kit kit02 ativo\" data=\"2\"><i class=\"fa fa-check-circle\"><\/i>Kit 02: Suposto Filho<\/div>";
fieldsetEndereco2 += " <div class=\"kit kit02 ativo\" data=\"2\"><i class=\"fa fa-check-circle\"><\/i>Kit 03: Suposto Pai<\/div>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item \" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"remetente2\">Remetente<\/label>";
fieldsetEndereco2 += " <input id=\"remetente2\" class=\"form-text hs-input\" name=\"remetente2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Não é aceito valores em branco\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"cep2\">CEP<\/label>";
fieldsetEndereco2 += " <input id=\"cep2\" class=\"form-text hs-input\" name=\"cep2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"number\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Por favor insira um número válido\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"rua2\">Rua\/Av.:<\/label>";
fieldsetEndereco2 += " <input id=\"rua2\" class=\"form-text hs-input\" name=\"rua2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Por favor insira um endereço válido\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"numero-complemento2\">Número e complemento<\/label>";
fieldsetEndereco2 += " <input id=\"numero-complemento2\" class=\"form-text hs-input\" name=\"numero-complemento2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Por favor insira um valor válido\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"bairro2\">Bairro<\/label>";
fieldsetEndereco2 += " <input id=\"bairro2\" class=\"form-text hs-input\" name=\"bairro2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Por favor insira um bairro\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"cidade2\">Cidade<\/label>";
fieldsetEndereco2 += " <input id=\"cidade2\" class=\"form-text hs-input\" name=\"cidade2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Por favor insira uma cidade válida\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"UF2\">UF<\/label>";
fieldsetEndereco2 += " <input id=\"UF2\" class=\"form-text hs-input\" name=\"UF2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Unidade Federativa\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"telefone2\">Telefone<\/label>";
fieldsetEndereco2 += " <input id=\"telefone2\" class=\"form-text hs-input\" name=\"telefone2\" required=\"required\" size=\"11\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Insira um telefone\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <input type=\"button\" data-page=\"2\" name=\"previous\" class=\"previous action-button\" value=\"Anterior\" \/>";
fieldsetEndereco2 += " <input type=\"button\" data-page=\"4\" name=\"next\" class=\"next action-button\" value=\"Proximo\" \/>";
fieldsetEndereco2 += " <\/fieldset>";
var current_fs, next_fs, previous_fs;
var left, opacity, scale;
var animating;
$(".next-1").click(function() {
$(".steps").validate({
errorClass: 'invalid',
errorElement: 'span',
rules: {
password: {
minlength: 6,
maxlength: 12,
},
conf_password: {
minlength: 6,
maxlength: 12,
equalTo: "#password"
},
telefone1: {
number: true
},
},
messages: {
email: {
email: " Por favor entre com um formato válido de e-mail",
},
password: {
minlength: "Por favor entre com no mínimo 6 caracteres",
maxlength: "Limite de 12 caracteres",
},
conf_password: {
equalTo: "As senhas são diferentes",
minlength: "Por favor entre com no mínimo 6 caracteres",
maxlength: "Limite de 12 caracteres",
},
telefone1: {
number: "Por favor insira um número de telefone",
},
},
errorPlacement: function(error, element) {
error.insertAfter(element.next('span').children());
},
highlight: function(element) {
$(element).next('span').show();
},
unhighlight: function(element) {
$(element).next('span').hide();
}
});
});
$(".next-1").click(function() {
$("#dados-pessoais").validate({
errorClass: 'invalid',
errorElement: 'span',
errorPlacement: function(error, element) {
error.insertAfter(element.next('span').children());
},
highlight: function(element) {
$(element).next('span').show();
},
unhighlight: function(element) {
$(element).next('span').hide();
}
});
});
$(".novo-endereco").click(function() {
var endereco1 = $("#progressbar").find(".endereco1");
if ($(".novo-endereco").text() == "Novo Endereço") {
endereco1.text("endereço 1");
$("#endereco .fs-title").text("Endereço Principal");
$("<li class='endereco2'>Endereço 2</li>").insertAfter(endereco1);
$(fieldsetEndereco2).insertAfter("#endereco");
$(".novo-endereco").html("Desfazer");
previous_fs = $("#endereco");
next_fs = $("#pagamento");
} else {
$(".endereco2").remove();
$("#endereco2").remove();
endereco1.text("endereço");
$("#endereco .fs-title").text("Endereço");
$(".novo-endereco").html("<i class='fa fa-plus font-big' aria-hidden='true'></i>Novo Endereço");
// $("#endereco2").hide();
}
});
$(".kit").click(function() {
$(this).addClass("ativo");
if ($(this).hasClass("ativo")) {
$(this).children("i").toggleClass("fa-circle-o fa-check-circle")
// $(this).prepend("<i class='fa fa-check-circle'></i>");
}
});
$(".next").click(function() {
$(".steps").validate({
errorClass: 'invalid',
errorElement: 'span',
errorPlacement: function(error, element) {
error.insertAfter(element.next('span').children());
},
highlight: function(element) {
$(element).next('span').show();
},
unhighlight: function(element) {
$(element).next('span').hide();
}
});
if ((!$('.steps').valid())) {
return true;
}
if (animating) return false;
animating = true;
current_fs = $(this).parent();
// if($(".endereco1.active").length > 0){
// if($('#endereco2').is(":visible") == true){
// next_fs = $(this).parent().next();
// }
// else {
// next_fs = $(this).parent().next(
// }
// }if($(".dados-pessoais.active").length > 0){
next_fs = $(this).parent().next();
console.log(next_fs);
// }
console.log(next_fs);
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
next_fs.show();
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
scale = 1 - (1 - now) * 0.2;
left = (now * 50) + "%";
opacity = 1 - now;
current_fs.css({
'transform': 'scale(' + scale + ')'
});
next_fs.css({
'left': left,
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
easing: 'easeInOutExpo'
});
});
$(".submit").click(function() {
$(".steps").validate({
errorClass: 'invalid',
errorElement: 'span',
errorPlacement: function(error, element) {
error.insertAfter(element.next('span').children());
},
highlight: function(element) {
$(element).next('span').show();
},
unhighlight: function(element) {
$(element).next('span').hide();
}
});
if ((!$('.steps').valid())) {
return false;
}
if (animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
next_fs.show();
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
scale = 1 - (1 - now) * 0.2;
left = (now * 50) + "%";
opacity = 1 - now;
current_fs.css({
'transform': 'scale(' + scale + ')'
});
next_fs.css({
'left': left,
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
easing: 'easeInOutExpo'
});
});
$(".previous").click(function() {
if (animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
previous_fs.show();
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
scale = 0.8 + (1 - now) * 0.2;
left = ((1 - now) * 50) + "%";
opacity = 1 - now;
current_fs.css({
'left': left
});
previous_fs.css({
'transform': 'scale(' + scale + ')',
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
easing: 'easeInOutExpo'
});
});
});
请在大于 675px 的分辨率下验证 jsfiddle 代码
根据 jquery 文档：
The .on() method attaches event handlers to the currently selected set of elements in the jQuery object.
换句话说，当您向页面添加动态内容时，.on() 方法的工作方式类似于 event listener。
在 jQuery 1.7 之前使用 .live() 方法，但已弃用。
您应该替换这些行：
$(".next").click(function() {
有了这个：
$(document).on("click",".next",function(){
对以前的做同样的事情：
$(".previous").click(function() {
有了这个
$(document).on("click",".previous",function(){