当我单击下一个按钮时，页码按未知顺序升序
When I click on next button page number ascending by unknown order.
我正在创建简单的调查，正如我所说，当我选择语言时，然后单击"下一步"，页码按未知顺序升序。我找不到错误在哪里。升序的逻辑是相当随机的。
有人可以帮助我吗？
$(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="answers">
<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>这是因为您在"run"函数中一次又一次地绑定单击事件，直到它达到数据库大小的总数。因此，请尝试仅绑定单击一次，以便它一次仅执行一次事件。您可以先尝试删除单击事件，其中将"run"函数中的单击事件与".unbind（）"事件绑定。
固定！
$(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)
};
};
if(!runed) {
reStep();
}
$('#next').click(function() {
next();
});
});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="answers">
<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>相关文章：
- ajax请求的顺序总是不同的
- 按照选项卡索引的顺序循环一个jQuery选择
- 匹配一个单词，其中候选人可以跨越顺序组(跨度）
- 按顺序添加和删除类
- 按我自己的类克隆另一个元素的内容和顺序
- Javascript-根据赋值顺序，按键合并对象数组
- 2个backbone.js集合，具有相同的模型，但排序顺序不同
- querySelector/getElementByClassName嵌套项的顺序
- 以不同的顺序输出数据
- 重新排列HTML元素的顺序并更改内容
- 在Javascript中列出顺序子集元素
- 是否“;对于的“;循环迭代遵循JavaScript中的数组顺序
- Mongodb$in以与数组中相同的顺序获取结果
- 如何使用phonegap从安卓设备中提取联系人的字母顺序
- 在表单OnChange中交换数字顺序
- 如何按对象反转Angular ngRepeat的顺序's键，这些键是数字键
- 如果其他脚本'装载顺序未知
- 当列表长度未知时按顺序调用 http.get
- 当我单击下一个按钮时，页码按未知顺序升序
- 当使用Jasmine测试Angular服务时，是脚本的包含顺序导致了这个未知的提供程序错误
