如何在下一步单击时以多步骤形式跳过一个字段集

时间:2016-10-08 16:43:18

标签: javascript jquery html fieldset

我一直在浪费2天时间试图解决这个问题。首先,任何帮助将不胜感激!

我有一个多步骤表单(由字段集分割),当我点击下一步时,它们显示下一个字段集,然后返回上一个按钮。

我在第二个字段集中有一个按钮,可以启用一个附加地址,当我没有点击此按钮时,我一直面临一些跳过此字段集的问题。

我试图使用next_fs = $(this).parent().nextAll().eq(3);跳过aditional地址的字段集但似乎没有用。

现在我的方法是(我知道它不是最好的,但我试图解决这个问题)是当我点击这个按钮启用aditional地址我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代码

1 个答案:

答案 0 :(得分:1)

根据jquery文档:

  

.on()方法将事件处理程序附加到当前选定的集合   jQuery对象中的元素。

换句话说,当您向页面添加动态内容时,.on()方法就像event listener一样。 在 jQuery 1.7 之前,.live()方法被用于它,但已被弃用。

你应该替换这些行:

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

用这个:

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

并为previuos做同样的事情:

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

&GT;

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