打算做一個在線的純前端的問卷調查,一共有十個題目,選擇A得一分,選B得兩分,選C得三分,選D得四分,然後最後直接彈出結果,目前我遇到的問題是例如用戶在第一題選擇了A之後,如果之後他修改他的答案為B,那麼他的分數並不會減去一分再重新加兩分,請問能用什麼方法解決這個問題?謝謝
<body>
<!-- 第一页 -->
<section class="page1">
<p class="swipers logo">
<p class="welcome">
<h3>主标题</h3>
<p>副标题</p>
</p>
<a href="#" class="start">开始测试</a>
</p>
</section>
<!-- 第二页 -->
<section class="page2">
<header class="head">
<p class="swiper-pagination swiper-pagination-bullets pagination">
</p>
</header>
<p class="swipers">
<p class="swiper-container swiper-container-horizontal">
<p class="swiper-wrapper">
<!-- 问题1 -->
<p class="swiper-slide">
<p class="question">
<h3>1</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="1" value="1"><span class="aFont">aaaaa</span>
</label>
<label>
<input type="radio" class="b" name="1" value="2"><span class="bFont">bbbbb</span>
</label>
<label>
<input type="radio" class="c" name="1" value="3"><span class="cFont">ccccc</span>
</label>
<label>
<input type="radio" class="d" name="1" value="4"><span class="dFont">ddddd</span>
</label>
</p>
</p>
<!-- 问题2 -->
<p class="swiper-slide">
<p class="question">
<h3>2</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="2">a
</label>
<label>
<input type="radio" class="b" name="2">b
</label>
<label>
<input type="radio" class="c" name="2">c
</label>
<label>
<input type="radio" class="d" name="2">d
</label>
</p>
</p>
<!-- 问题3 -->
<p class="swiper-slide">
<p class="question">
<h3>3</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="3">a
</label>
<label>
<input type="radio" class="b" name="3">b
</label>
<label>
<input type="radio" class="c" name="3">c
</label>
<label>
<input type="radio" class="d" name="3">d
</label>
</p>
</p>
<!-- 问题4 -->
<p class="swiper-slide">
<p class="question">
<h3>4</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="4">a
</label>
<label>
<input type="radio" class="b" name="4">b
</label>
<label>
<input type="radio" class="c" name="4">c
</label>
<label>
<input type="radio" class="d" name="4">d
</label>
</p>
</p>
<!-- 问题5 -->
<p class="swiper-slide">
<p class="question">
<h3>5</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="5">a
</label>
<label>
<input type="radio" class="b" name="5">b
</label>
<label>
<input type="radio" class="c" name="5">c
</label>
<label>
<input type="radio" class="d" name="5">d
</label>
</p>
</p>
<!-- 问题6 -->
<p class="swiper-slide">
<p class="question">
<h3>6</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="6">a
</label>
<label>
<input type="radio" class="b" name="6">b
</label>
<label>
<input type="radio" class="c" name="6">c
</label>
<label>
<input type="radio" class="d" name="6">d
</label>
</p>
</p>
<!-- 问题7 -->
<p class="swiper-slide">
<p class="question">
<h3>7</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="7">a
</label>
<label>
<input type="radio" class="b" name="7">b
</label>
<label>
<input type="radio" class="c" name="7">c
</label>
<label>
<input type="radio" class="d" name="7">d
</label>
</p>
</p>
<!-- 问题8 -->
<p class="swiper-slide">
<p class="question">
<h3>8</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="8">a
</label>
<label>
<input type="radio" class="b" name="8">b
</label>
<label>
<input type="radio" class="c" name="8">c
</label>
<label>
<input type="radio" class="d" name="8">d
</label>
</p>
</p>
<!-- 问题9 -->
<p class="swiper-slide">
<p class="question">
<h3>9</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="9">a
</label>
<label>
<input type="radio" class="b" name="9">b
</label>
<label>
<input type="radio" class="c" name="9">c
</label>
<label>
<input type="radio" class="d" name="9">d
</label>
</p>
</p>
<!-- 问题10 -->
<p class="swiper-slide">
<p class="question">
<h3>10</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="10">a
</label>
<label>
<input type="radio" class="b" name="10">b
</label>
<label>
<input type="radio" class="c" name="10">c
</label>
<label>
<input type="radio" class="d" name="10">d
</label>
</p>
</p>
<!-- 问题11 -->
<p class="swiper-slide">
<p class="question">
<h3>11</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="11">a
</label>
<label>
<input type="radio" class="b" name="11">b
</label>
<label>
<input type="radio" class="c" name="11">c
</label>
<label>
<input type="radio" class="d" name="11">d
</label>
</p>
</p>
</p>
</p>
</p>
</section>
<!-- 第三页 -->
<section class="page3">
<p class="result">
<p id="result">这是结果</p>
</p>
</section>
</body>
<script>
//记分设置
$(document).ready(function(){
$(".choice input[type = 'radio']").on("click",count);
});
//count设置
function count(){
var localResult = 0;
for (var i = 1;i <= 10;i++){
var option = $(".choice input[name = '"+i+"']:checked");
if (option.attr("class")){
var score = 0;
switch (option.attr("class")){
case "a":
score = score + 1;
break;
case "b":
score = score + 2;
break;
case "c":
score = score + 3;
break;
case "d":
score = score + 4;
break;
default :
break;
}
localResult += score;
}
}
console.log(localResult);
if (localResult <= 10){
$("#result").text("小于等于10")
}else if (localResult <= 20){
$("#result").text("小于等于20")
}else if (localResult <= 30){
$("#result").text("小于等于30")
}else{
$("#result").text("小于等于40")
}
}
</script>
//僅針對你的單選題,且每道題目都設定了value
//雖然你說是十道而所貼代碼中為11道,長度依然取的10
他提交問卷的時候才把所有input的value值加起來不就可以了
其實不能這樣算。計算使用者的分數的時候就是重新統計一下,那麼如果這樣做的話,怎麼會出現-1+2這樣的情況。這可能是重新累加
若是10題選完後才彈出總分,可以在最後獲取所有題目的被選的答案對應的分數不就好了,沒必要選擇時立刻累加。
第11題,你怎麼點,分數都不加也不減。
因為你沒有對它計算,程式碼不用變化,把10改成11就可以了。
雷雷