我已经浪费了整整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'
});
});
});
请验证分辨率超过675像素的jsfiddle代码
根据jquery文档:
.on()方法将事件处理程序附加到当前选定的集合的元素
换句话说,当您向页面添加动态内容时,.on()
方法就像event listener
方法一样工作。在jQuery 1.7之前使用了.live()
方法,但已被弃用。
你应该替换这些行:
$(".next").click(function() {
与这个:$(document).on("click",".next",function(){
和前面的操作相同:
$(".previous").click(function() {
与
$(document).on("click",".previous",function(){