我正在创建简单的调查，正如我所说，当我选择语言时， 然后单击“下一步”，页码按未知顺序升序。 我找不到错误在哪里。上升的逻辑是相当随机的。
有人可以帮助我吗？
$(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 a {
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 a .back {
margin-left: 30px;
}
footer .prog-b {
margin: 40px auto 30px;
max-width: 768px;
position: relative;
height: 10px;
}
footer .prog-b i {
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 For 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 to 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>最佳答案
这是因为您在“运行”函数中一次又一次地绑定(bind)单击事件，直到达到数据库大小的总数。 因此，尝试仅绑定(bind)一次单击，以便它一次只执行一次事件。 您可以尝试先删除点击事件，将“run”函数中的点击事件与“.unbind()”事件绑定(bind)。
关于javascript - 当我单击下一个按钮时，页码按未知顺序升序。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35037691/