- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
Ich habe insgesamt zehn Fragen mit jeweils vier Optionen ABCD und dann unterschiedliche Optionen plus unterschiedliche Bewertungen. Am Ende werden unterschiedliche Ergebnisse basierend auf unterschiedlichen Bewertungen erzielt, aber ich weiß nicht, wie ich es umsetzen soll mein Code
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- stylesheets -->
<link rel="stylesheet" href="css/swiper.min.css" type="text/css">
<link rel="stylesheet" href="css/spa.css" type="text/css">
</head>
<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="quetion">
<h3>1</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="1">a
</label>
<label>
<input type="radio" class="b" name="1">b
</label>
<label>
<input type="radio" class="c" name="1">c
</label>
<label>
<input type="radio" class="d" name="1">d
</label>
</p>
</p>
<!-- 问题2 -->
<p class="swiper-slide">
<p class="quetion">
<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="quetion">
<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="quetion">
<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="quetion">
<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="quetion">
<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="quetion">
<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="quetion">
<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="quetion">
<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="quetion">
<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>
</p>
</p>
</p>
</section>
<!-- 第三页 -->
<section class="page3">
<p class="result">
<p id="result"></p>
</p>
</section>
<!-- third-party javascript -->
<script src="js/jq/jquery-3.1.1.min.js"></script>
<script src="js/siwper/swiper.min.js"></script>
<!-- our javascript -->
<script>
//记分设置
$(document).ready(function(){
var result = 0;
$('.a').click(function(){
result = result + 1;
console.log(result);
});
$('.b').click(function(){
result = result + 2;
console.log(result);
});
$('.c').click(function(){
result = result + 3;
console.log(result);
});
$('.d').click(function(){
result = result + 4;
console.log(result);
});
});
//swiper设置
var mySwiper = new Swiper (".swiper-container", {
pagination: '.swiper-pagination',
paginationBulletRender: function (swiper, index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 0,
loop: false,
onReachEnd: function(swiper){
$(".page2").hide();
$(".page3").show();
}
});
$(".page2 , .page3").hide();
$(".start").on("click",function(){
$(" .page1").hide();
$(" .page2").show();
});
$(".swiper-container label,.swiper-container input").click(function(){
var this_active = $(this).parents(".swiper-slide").index();
setTimeout(function(){
mySwiper.slideTo(this_active+1,500)
},500);
});
$('.swiper-button-next').click(function(){
if(mySwiper .isEnd){
$(" .page2").hide();
$(" .page3").show();
$("#result").value = result;
}
});
$('span:last').css("display","none");
</script>
</body>
</html>
过去多啦不再A梦2017-05-19 10:47:43
类似这种没有完成动作的计算（例如：点击提交问卷，就是一种完成动作，可以在这时候去计算总分），你需要在每一次操作的时候计算总分，如果有使用Vue，用计算属性就很漂亮了~
所以上面的点击事件需要更改：（代码还没有验证，但思路是那样）
//记分设置
$(document).ready(function(){
var result = 0;
$('.a').click(function(){
result = result + 1;
console.log(result);
});
$('.b').click(function(){
result = result + 2;
console.log(result);
});
$('.c').click(function(){
result = result + 3;
console.log(result);
});
$('.d').click(function(){
result = result + 4;
console.log(result);
});
});
// 修改为：
$(document).ready(function(){
$(".choice input[type='radio']").on('click', count);
});
var result = 0;
function count() {
var _result = 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 = 1;
break;
case "b":
score = 2;
break;
case "c":
score = 3;
break;
case "d":
score = 4;
break;
default:
break;
}
_result += score;
}
}
}
阿神2017-05-19 10:47:43
点击的时候需要加标识符判断是否更改了选项- -不然做题的人在abcd间不停切换你的result也会累加，就乱了，最后输出结果肯定是根据各个分数段的- -用switch或者一堆eles if都随你了