搞了一天了 真的不知道问题出在哪里,这是一个心理测试, 虽然回答选项 都是从 很同意 到 不同意 但是计分 却不一样 有两种 一种是 1分-5分 另一种是5分-1分 但是这个功能死活实现不了。 很奇怪的是判断逻辑是没问题的,执行语句也是没问题的 我试过N遍了 都是不行 都是直接执行ELSE 后面的语句,导致所有回答选项计分都是一样的关键代码我已经框出来了,现在都是很同意到不同意(1-5)分,有些需要5-1分的就实现不了。请大家帮我看看问题出自哪里 第一次碰到这么邪乎的问题
代码贴出来
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>心理测验</title>
<link href="bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<link href="jquery.mmenu.all.css" rel="stylesheet" />
<style type="text/css">
body {
background: #a5a5a5;
background-size: 100% auto !important
}
body .avatar .img-circle {
background: #347433 !important
}
body form .btn {
background: #347433 !important;
border-color: #347433 !important
}
#header h1,
#header p {
background: none !important
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="jquery.hammer.min.js"></script>
<script type="text/javascript" src="jquery.mmenu.min.all.js"></script>
<script src="wxm-core.js"></script>
</head>
<body id="test1" class="test1">
<div id="content">
<div id="header_bar">
</div>
<!-- E header_bar -->
<div class="container">
<div id="header" class="text-center">
<div style="height: 65px;"></div>
<div class="container">
<div class="text-center header">
<h1 class="bold">
善爱婚研信任度测评</h1>
<p>
</div>
<!-- E header -->
<div id="bd" class="panel">
<div id="panel1" class="panel-body">
<form action="#">
<div class="form-group avatar text-center">
<label for="" class="sr-only">前言</label>
<a href="javascript:void(0)" class="img-circle" name="1"><span style="float: left;text-align: center; width: 100%; padding-top: 18px;">
<img src="ks.jpg"></span> </a>
</div>
<dl>
<dd>
你们的信任标尺</dd>
</dl>
<div class="buttons">
<a href="#result" class="btn btn-lg btn-success" style="width: 100%" onclick="return next(0);">
<strong style="color:#fdfd88;">开始测试</strong></a>
</div>
<div class="buttons" style="margin-top: 10px;">
<a href="" id="weixinfollowlink2" class="btn btn-lg btn-danger" style="width: 100%;">微信关注</strong></a>
</div>
</form>
</div>
<!-- 主要的问答界面开始 -->
<!-- E panel-body -->
<div id="panel2" class="panel-body js_answer" style="display: none;">
<form action="#" method="POST">
<a name="result" href="javascript:void(0)"></a>
<div class="form-group avatar text-center">
<label for="" class="sr-only">
前言</label>
<a href="javascript:void(0)" class="img-circle" name="1" style="position:relative"><span
id="resultscore" style="float: left;
text-align: center; width: 100%; padding-top: 0px;"></span>
</a>
</div>
<dl>
<dd></dd>
</dl>
<ul class="list-group js_group">
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" value="" />
<span class="QAns"></span></li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" value="" />
<span class="QAns"></span></li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" value="" />
<span class="QAns"></span></li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" value="" />
<span class="QAns"></span></li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" value="" />
<span class="QAns"></span></li>
</ul>
</form>
</div>
<div id="panel3" class="panel-body js_result" data-id="0" style="display: none;">
<h1 class="bold text-danger">
0~52分</h1>
<hr>
<dl>
<dt>详细分析:</dt>
<dd>
<p>
你对伴侣和婚恋关系的信任度较低。不是所有的伴侣都要永远在一起,但
即使是那些受到信任危机困扰的伴侣,如果双方在整个过程中勇于承担自
已的义务,也是可以走出危机的。(在继续阅读本书剩下的部分之前,可
以先阅读第10章。这一章可以帮助你辨别你的伴侣是否值得信任。)独自
阅读本书可以帮你确定自己的处境,可能帮你在和伴侣互动时做出更加积
极的转变。但如果他(她)同意,试着一起来做这些练习。你们都准备好
进行一场寻找心灵之旅了吗?请在读完这本书后再做一次,并将这些建议
付诸行动。如果分数依然很低,你们可以去寻求更多个性化的帮助。</p>
</dd>
</dl>
<div class="buttons">
<a href="javascript:void(0)" class="btn btn-lg btn-success" style="width: 100%" onclick="$('#mcover').show()">
分享给其他小伙伴</a>
</div>
</div>
<div id="panel3" class="panel-body js_result" data-id="1" style="display: none;">
<h1 class="bold text-danger">
53~105分</h1>
<hr>
<dl>
<dt>详细分析:</dt>
<dd>
<p>
你们之间的信任属于中等水平。你对伴侣忠诚——但并不确定。你可以通
过书中的练习来巩固你们的关系。尽管最佳方式是你们一起完成练习,但
即使是你独自完成,这些练习也会对你们的关系有所裨益。当你们中的一
个人更加清楚自己的需求和渴望时,你们就会更加关注这些方面,也更容
易做出积极的转变。如果你们的信任标尺没有进步,反思一下你们两人是
否都把婚恋关系放到了首要位置。如果你们的信任标尺提高了,这充分说
明你们彼此更加心灵相通、幸福快乐,你们之间的关系也更令人满意。</p>
</dd>
</dl>
<div class="buttons">
<a href="javascript:void(0)" class="btn btn-lg btn-success" style="width: 100%" onclick="$('#mcover').show()">
分享给其他小伙伴</a>
</div>
</div>
<div id="panel3" class="panel-body js_result" data-id="1" style="display: none;">
<h1 class="bold text-danger">
106~210分</h1>
<hr>
<dl>
<dt>详细分析:</dt>
<dd>
<p>
你对伴侣深信不疑。这样坚定的基础增加了你们白头偕老的可能性。如果
你处在这一分数区间的下游,你们仍然有必要就关系问题好好谈谈。如果
你的信任水平非常高,这本书仍然对你有用。想想你们在一起读书,这本
身就是一件浪漫的事,还会让你们更加确信对彼此的爱,而且会教你们如
何维持现状。</p>
</dd>
</dl>
<div class="buttons">
<a href="javascript:void(0)" class="btn btn-lg btn-success" style="width: 100%" onclick="$('#mcover').show()">
分享给其他小伙伴</a>
</div>
</div>
</div>
<!-- E container -->
<input type="hidden" name="totalsc" id="totalsc" value="0" />
<script type="text/javascript">
var total = 42;
var scoreArr = new Array();
scoreArr[0] = new Array();
scoreArr[0]['min'] = 0;
scoreArr[0]['max'] = 52;
scoreArr[1] = new Array();
scoreArr[1]['min'] = 53;
scoreArr[1]['max'] = 105;
scoreArr[2] = new Array();
scoreArr[2]['min'] = 106;
scoreArr[2]['max'] = 210;
var tScore = 0;
//集中添加问题及选项
var QArr = new Array(parseInt(total));
//集中添加问题
QArr[0] = "1.我感到被伴侣保护。";
QArr[1] = "2.我的伴侣对我忠诚。";
QArr[2] = "3.我的伴侣在经济上支持我。";
QArr[3] = "4.在伴侣身边我有时会感到不适。";
QArr[4] = "5.我不认为伴侣和他人存在亲密关系。";
QArr[5] = "6.从现在开始,我的伴侣不会和除我以外的人生育孩子。";
QArr[6] = "7.我的伴侣全心全意地爱着我们的孩子,或者至少尊重我自己的";
QArr[7] = "8.我相信大多数人是可信的。";
QArr[8] = "9.我的伴侣让我有安全感。";
QArr[9] = "10.我知道我的伴侣永远都是我非常亲密的朋友。";
QArr[10] = "11.我的伴侣会尽到共同抚养孩子的义务。";
QArr[11] = "12.关键时刻,我可以指望我的伴侣为我和家庭作出牺牲。";
QArr[12] = "13.我的伴侣会做家务。";
QArr[13] = "14.我的伴侣为提高家庭经济安全而努力工作。";
QArr[14] = "15.我的伴侣不尊重我。";
QArr[15] = "16.我的伴侣让我觉得自己性感撩人。";
QArr[16] = "17.我的伴侣在做决定时总是考虑我的感受。";
QArr[17] = "18.我知道我的伴侣会在我生病时照顾我。";
QArr[18] = "19.当我们相处不融洽时,我的伴信会和我协作处理我们之间的关系。";
QArr[19] = "20.我的伴侣会给我情绪上的陪伴。";
QArr[20] = "21.我的伴侣不过度饮酒和使用药物。";
QArr[21] = "22.我的伴侣会对我作浪漫的表示。";
QArr[22] = "23.我的伴侣对我的家人很照顾。";
QArr[23] = "24.伤心或愤怒时,我可以信任伴侣对我说的话。";
QArr[24] = "25.我的伴侣轻视或者羞辱我。";
QArr[25] = "26.我的伴侣总是先想到别人,而不是我。";
QArr[26] = "27.我的伴侣会和我一起工作,在经济方面共同进退。";
QArr[27] = "28.我在婚恋关系中有权力和影响力。";
QArr[28] = "29.我的伴侣会向他人展示他(她)有多珍惜我。";
QArr[29] = "30.我的伴侣帮我照顾孩子。";
QArr[30] = "31.我就是不能完全信任我的伴侣。";
QArr[31] = "32.我的伴侣信守承诺。";
QArr[32] = "33.我的伴侣是个品行端正的人。";
QArr[33] = "34.我的伴侣会做他(她)答应做的事。";
QArr[34] = "35.我的伴侣会背叛我的信任。";
QArr[35] = "36.我的伴侣对我深情款款。";
QArr[36] = "37.在争论时,我可以相信我的伴侣是真的在听我说话。";
QArr[37] = "38.我的伴侣能够分享我的梦想,并以此为荣。";
QArr[38] = "39.我害怕我的伴侣出轨。";
QArr[39] = "40.我的伴侣的言谈举止都反映了我们共同的价值观。";
QArr[40] = "41.我的伴侣经常和我做爱。";
QArr[41] = "42.我不能依靠伴侣和我一起建立或维持家庭的感觉。";
//集中添加回答
var QAnn = 5;
var QAns = new Array(QAnn);
QAns[0] = "A.很同意";
QAns[1] = "B.同意";
QAns[2] = "C.中立";
QAns[3] = "D.不同意";
QAns[4] = "E.很不同意";
//集中添加分数排序
var QAnon = 2; //两种计分类型,一种正序,一种反序。
var QAno = new Array();
QAno[0] = [1, 2, 3, 4, 5];
QAno[1] = [5, 4, 3, 2, 1];
//集中将分数进行初始化
//参考对照序列[正序]
var referSn = new Array();
referSn = [4, 15, 25, 26, 31, 39];
var QAnor = false;
for (var i = 0; i < QArr.length; i++) {
//集中添加选题界面
if (i <= QArr.length - 1) {
$("#panel2").after($("#panel2").clone());
}
//求正序或者倒序
if (referSn.indexOf(i + 1) != -1) {
QAnor = true;
} else {
QAnor = false;
}
**
> //自动为各项添加分值
> if (QAnor == true) {
>
> for (var j = 0; j < QAno[0].length; j++) {
> $("div.js_answer").eq(i).find("input[name='g']").eq(j).val(QAno[0][j]);
> }
> } else {
>
> for (var j = 0; j < QAno[1].length; j++) {
> $("div.js_answer").eq(i).find("input[name='g']").eq(j).val(QAno[1][j]);
> }
> }
**
}
function next(t, score) {
// console.log(t);
$("div#bd > div.panel-body").hide();
$("div.js_answer").eq(t).show();
//自动加分数和动态加分显示
var cEle = $(
"<span id = \"upscore\" style=\"color:white; font-size:15px;position:absolute;left:90%;top:0px;\">+" +
score + "</span>");
// console.log(cEle);
$("div.js_answer").eq(t).find("#resultscore").after(cEle);
$("div.js_answer").stop().eq(t).find("#upscore").animate({
top: '-100px',
opacity: '0'
}, 1500);
$("div.js_answer").eq(t).find("#resultscore").html($("#totalsc").val());
//自动添加问题项
$("div.js_answer").eq(t).find("dd").html(QArr[t]);
//自动添加回答项
for (var i = 0; i < QAns.length; i++) {
$("div.js_answer").eq(t).find(".QAns").eq(i).text(QAns[i]);
}
gotoTop();
}
function result(t) {
// share_pop("open", 10000);
$("div#bd > div.panel-body").hide();
for (var i = 0; i < parseInt(scoreArr.length); i++) {
if (parseInt(t) >= parseInt(scoreArr[i]['min']) && parseInt(t) <= parseInt(
scoreArr[i][
'max'
])) {
$("div.js_result").eq(i).show();
// $("div.js_result").eq(i).find(".resultscore").eq(0).html($("#totalsc").val());
gotoTop();
} else
continue;
}
}
//累计加值,判断当前第几题 如果到最后了就直接显示结果,如果未到直接跳入下一题,
var jieliu = true;
function toggle(t) {
if (jieliu) {
jieliu = false;
$(t).children("input").attr("checked", "checked");
$("li.list-group-item").removeClass('active');
var score = $(t).children("input:checked").val();
tScore = parseInt(tScore) + parseInt(score);
$("#totalsc").val(tScore);
$(t).addClass('active');
var t = $("div.js_answer").index($(t).parents("div.js_answer")) + 1;
// console.log(t);
if (t >= total) {
result(tScore);
} else {
setTimeout(function () {
next(t, score);
}, 300);
}
//定时器
setTimeout(function () {
jieliu = true;
}, 500);
}
}
function gotoTop() {
$("body,html").animate({
scrollTop: ($("#header").offset().top + $("#header").height())
}, 0);
}
</script>
</div>
<!-- 分享朋友圈及好友代码 -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
/*
* 注意:
* 1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
* 2. 如果发现在 Android 不能分享自定义内容,请到官网下载最新的包覆盖安装,Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
* 3. 常见问题及完整 JS-SDK 文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决,如仍未能解决可通过以下渠道反馈:
* 邮箱地址:weixin-open@qq.com
* 邮件主题:【微信JS-SDK反馈】具体问题
* 邮件内容说明:用简明的语言描述问题所在,并交代清楚遇到该问题的场景,可附上截屏图片,微信团队会尽快处理你的反馈。
*/
wx.config({
debug: false,
appId: '<?php echo $signPackage["appId"]; ?>',
timestamp: <?php echo $signPackage["timestamp"]; ?>,
nonceStr: '<?php echo $signPackage["nonceStr"]; ?>',
signature: '<?php echo $signPackage["signature"]; ?>',
jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage',
'onMenuShareQQ', 'onMenuShareWeibo', 'showOptionMenu', 'hideMenuItems',
'onMenuShareQZone'
]
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
//分享朋友圈
wx.onMenuShareTimeline({
title: '善爱婚研信任度评测',
link: 'http://www.tingxinyuan.com/ts/index.php',
desc: '你想知道的,都在这里', // 分享描述
imgUrl: 'http://www.tingxinyuan.com/logooooo.jpg', // 自定义图标
success: function () {
shareSuccess();
}
});
//分享给好友
wx.onMenuShareAppMessage({
title: '善爱婚研信任度评测',
link: 'http://www.tingxinyuan.com/ts/index.php',
desc: '你想知道的,都在这里', // 分享描述
imgUrl: 'http://www.tingxinyuan.com/logooooo.jpg', // 自定义图标
success: function () {
shareSuccess();
}
});
});
</script>
<script type="text/javascript">
//点击选项时变色代码
$(function () {
$("input[name='g']").change(function () {
$("li.list-group-item").removeClass('active')
$(this).parent("li.list-group-item").addClass('active');
});
});
</script>
<!-- 分享指导代码 -->
<div id="mcover" onclick="document.getElementById('mcover').style.display='';" style="display: none;"><img
src="guide.png"></div>
<div id="pop_success" class="text-center" style="display: none;">
<div class="bd text-center">
<p style="line-height: 110px;">
分享成功</p>
</div>
<!-- E bd -->
</div>
<!-- E pop_success -->
<div id="popup-1" class="tip" style="display: none;">
<div>
<a id="close1" href="javascript:void(0)"><i class="glyphicon glyphicon-remove"></i>
</a>
<div class="row text-center">
<a href="javascript:;" class="btn btn-danger col-sm-12 btn-lg" id="weixinfollowlink">微信关注:野海潮</a>
</div>
<!-- E discuss -->
</div>
</div>
<!-- E tip -->
<div id="follow" class="well" style="display: none;">
<a id="close1" href="javascript:void(0)">X</a>
<div class="row text-center">
<a href="javascript:;" class="btn btn-danger col-sm-12 btn-lg" id="weixinfollowlink1">微信关注:野海潮</a>
</div>
<!-- E row -->
</div>
<script>
$(function () {
$("a#close1").click(function () {
share_pop("close", 0);
});
if (navigator.userAgent.indexOf("MicroMessenger")) {
$("#weixinfollowlink").attr("href",
"https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI0NzQyNDY2Nw==&scene=126#wechat_redirect"
);
$("#weixinfollowlink1").attr("href",
"https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI0NzQyNDY2Nw==&scene=126#wechat_redirect"
);
$("#weixinfollowlink2").attr("href",
"https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI0NzQyNDY2Nw==&scene=126#wechat_redirect"
);
}
});
function shareSuccess() {
$("div#pop_success").show().delay(1500).fadeOut("slow");
}
</script>
<div id="copy">
<p class="text-center">
© <a href="http://tingxinyuan.com" target="_blank">听心苑心理</a>
</p>
</div>
<!-- E copy -->
<div id="share_tips" class="sr-only">
<div class="container text-right">
点击右上角,分享给朋友/朋友圈 <i class="glyphicon glyphicon-hand-up element-animation"></i>
</div>
<!-- E container -->
</div>
</body>
</html>
大家还可以直接访问我的站的地址 http://www.tingxinyuan.com/ts/
问题描述
问题出现的环境背景及自己尝试过哪些方法
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
关键问题出在这一句.
$('#panel2') 每次都会选中第一个 id 为 panel2 的元素. 所以你每次都是在第一个元素后面出入新的元素, 导致除第一个元素以外的所有元素每次循环都往后位移了一个位置, 这样其实你每次循环的时候 i 都指向同一个元素. 在不改变 html 的情况下, 解决方案如下.
ps: 建议用 class 而不是 id.