当我点击按未知顺序升序的下一个按钮页码时。

时间：2016-01-27 12:41:32

标签： javascript jquery

我正在创建简单的调查，正如我所说，当我选择语言时， 然后单击＆＃34; next＆＃34 ;,页码以未知顺序递增。 我无法找到错误的位置。提升的逻辑是相当随机的。

有人可以帮助我吗？

＆＃13;
＆＃13; 
$(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();
    }

});
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

这是因为您再次在“运行”功能中绑定点击事件，直到达到数据库大小的总计数。 因此，尝试仅绑定一次点击，这样它将只执行一次事件。 您可以先尝试删除点击事件，然后将“run”功能中的click事件与“.unbind（）”事件绑定在一起。

答案 1 :(得分：0)

固定！ 

$(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="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>

相关问题
最新问题