1. дома
  2. Вопрос и ответ
  3. Как пропустить одно полевое задание в многоступенчатой ​​форме на следующем шаге, нажмите

Как пропустить одно полевое задание в многоступенчатой ​​форме на следующем шаге, нажмите

2016-10-08 2 views
0

Я потратил 2 дня на то, чтобы решить этот вопрос. в первую очередь, любая помощь будет оценена!Как пропустить одно полевое задание в многоступенчатой ​​форме на следующем шаге, нажмите

У меня есть одна многошаговая форма (разделенная полями), и когда я нажимаю дальше, они показывают следующий набор полей и возвращаются с предыдущей кнопкой.

У меня есть одна кнопка во втором полевом поле, которое разрешает один дополнительный адрес. Мне пришлось столкнуться с некоторыми проблемами, чтобы пропустить этот набор полей, когда я НЕ нажимаю эту кнопку.

Я попытался использовать next_fs = $(this).parent().nextAll().eq(3); для того, чтобы перетащить полевой адрес дополнительного адреса, но, похоже, он не работает.

Теперь мой подход (я знаю, что это не самый лучший, но я пытаюсь решить эту проблему), когда я нажимаю эту кнопку, чтобы включить дополнительный адрес, который я вставляю после() целое содержимое набора полей (объявлено в одной строке) в 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' 
    }); 
});

});

Пожалуйста проверить jsfiddle код в более чем 675px резолюции

источник

2016-10-08 Yuri Ramos

+0

Поскольку (как вы сказали) ваш нынешний подход не самый лучший, почему бы не написать скрипку, демонстрирующую ваш оригинальный подход? – MJH

ответ

1

Согласно документации Jquery:

.он() метод присоединяет обработчики событий выбранного в данный момент установлен элементов в объект jQuery.

Другими словами, при добавлении динамического содержимого страницы метод .on() работает как event listener. До jQuery 1.7 Метод .live() был использован для этого, но стал устаревшим.

Вы должны заменить эти строки:

$(".next").click(function() {

с этим:

$(document).on("click",".next",function(){

и сделать то же самое для previuos:

$(".previous").click(function() {

>

$(document).on("click",".previous",function(){

источник

2016-10-08 19:18:24 Giovani

+0

Спасибо, много человек !!! Это, наконец, сработало, ты сделал мой день. Я буду делать глубокие исследования функции $ (документа), не могли бы вы объяснить мне, почему это происходит? –

+0

@YuriRamos, я улучшил свой ответ. – Giovani

Смежные вопросы

 Смежные вопросы