javascript - When I click on next button page number ascending by unknown order. -
i'm creating simple survey , said, when select language, , clicking on "next", page number ascending unknown order. cant find error is. logic of ascending pretty random.
can 1 me?
$(document).ready(function(){ // declare main variables var step = 0, runed = false; var db = [{ question: "question 1" },{ question: "question 2" },{ question: "question 3" },{ question: "question 4" },{ question: "question 5" },{ question: "question 6" },{ question: "question 7" }]; var tot = db.length; var lang; function restep() { $('.pg .tot').html(tot); $('.pg .cur').html(step); if(step == 0) { $('footer').hide(); } else { $('footer').show(); } run(); }; function next() { step++; restep(); }; function run() { if(step == 0) { // first step handler runed = true; $('[step=' + step + '] a').click(function(){ lang = $(this).attr('data'); $(this).parent().fadeout(300); next(); }); } else if(step > db.length) { // question handler } else { // result handler console.log(step); $('.qstripe p').fadeout(); $('.qstripe h1').html(db[step - 1].question) $('#next').click(function() { next(); }); }; }; if(!runed) { restep(); } });html, body { font-family: 'nunito', sans-serif; font-weight: 100; } html { background: url('../img/bg.png') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } * { margin: 0; padding: 0; } .pull { float: left; } .pulr { float: right; } .clr { clear: both; } .green { background: #8cc73f; } .blue { background: #29aae1; } header { background: url("../img/logo.png") center center no-repeat; background-size: 100% auto; width: 400px; height: 133px; margin: 25px auto 0; } .survey { margin: 25px auto 0; } .qstripe { margin-bottom: 35px; line-height: 70px; } .qstripe h1 { color: #ffffff; font-size: 2em; text-align: center; background: #29aae1; } .qstripe p { padding-top: 20px; color: #2c2c2c; font-size: 1.7em; line-height: 1.7em; text-align: center; } .qstripe p span { display: block; } .ans { margin: 0 auto; width: 768px; text-align: center; } .ans .an { display: inline-block; vertical-align: top; margin: 10px; padding: 10px 20px; width: 225px; line-height: 30px; font-size: 1.1em; text-align: center; border-radius: 8px; background: #29aae1; color: white; cursor: pointer; } footer { padding-bottom: 20px; position: fixed; left: 0; right: 0; bottom: 0; } footer .btns { margin: auto; max-width: 768px; } footer { display: inline-block; font-size: 1.1em; width: 225px; height: 30px; border-radius: 8px; padding: 10px; margin: auto; text-align: center; color: white; font-family: 'nunito', sans-serif; font-weight: 100; font-size: 20px; cursor: pointer; } footer .back { margin-left: 30px; } footer .prog-b { margin: 40px auto 30px; max-width: 768px; position: relative; height: 10px; } footer .prog-b { display: block; position: absolute; width: 30px; height: 30px; left: 30%; margin-top: -10px; border-radius: 50px; } footer .pg { text-align: center; color: #29aae1; font-size: 2em; }<!doctype html> <html> <head> <meta charset="utf-8"/> <title>key care</title> <link href='https://fonts.googleapis.com/css?family=nunito:400,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="static/css/style.css"> </head> <body> <header></header> <div class="survey"> <div class="qstripe"> <h1>we want improve!</h1> <p> select language first </p> </div> <div class="ans"> <div step="0"> <a class="an" data="sv">svenska</a> <a class="an" data="en">english</a> <a class="an" data="so">soomaali</a> <a class="an" data="ar">العربية</a> </div> </div> <footer> <div class="btns"> <a class="pull blue" id="prev">back</a> <a class="pulr green" id="next">next</a> </div> <div class="clr"></div> <div class="prog-b green"> <i class="blue"></i> </div> <div class="pg"> <span class="cur"></span>/<span class="tot"></span> </div> </footer> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript" src="static/js/app.js"></script> </body> </html>
that because binding click event in "run" function again , again til reach total count of db size. try bind click once perform event once @ time. can try remove click event first binding click event in "run" function ".unbind()" event.
Comments
Post a Comment