javascript - 如何实现选择不同的单选项分别加上不同的分数
本文介绍了javascript - 如何实现选择不同的单选项分别加上不同的分数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我一共有十个题目，分别有ABCD四个选项，然后不同的选项加上不同的分数，在最后根据不同的分数得出不同的结果，但是不知道如何实现，以下是我的代码
<!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">
<div class="swipers logo">
<div class="welcome">
<h3>主标题</h3>
<p>副标题</p>
</div>
<a href="#" class="start">开始测试</a>
</div>
</section>
<!-- 第二页 -->
<section class="page2">
<header class="head">
<div class="swiper-pagination swiper-pagination-bullets pagination">
</div>
</header>
<div class="swipers">
<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
<!-- 问题1 -->
<div class="swiper-slide">
<div class="quetion">
<h3>1</h3>
</div>
<div 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>
</div>
</div>
<!-- 问题2 -->
<div class="swiper-slide">
<div class="quetion">
<h3>2</h3>
</div>
<div 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>
</div>
</div>
<!-- 问题3 -->
<div class="swiper-slide">
<div class="quetion">
<h3>3</h3>
</div>
<div 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>
</div>
</div>
<!-- 问题4 -->
<div class="swiper-slide">
<div class="quetion">
<h3>4</h3>
</div>
<div 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>
</div>
</div>
<!-- 问题5 -->
<div class="swiper-slide">
<div class="quetion">
<h3>5</h3>
</div>
<div 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>
</div>
</div>
<!-- 问题6 -->
<div class="swiper-slide">
<div class="quetion">
<h3>6</h3>
</div>
<div 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>
</div>
</div>
<!-- 问题7 -->
<div class="swiper-slide">
<div class="quetion">
<h3>7</h3>
</div>
<div 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>
</div>
</div>
<!-- 问题8 -->
<div class="swiper-slide">
<div class="quetion">
<h3>8</h3>
</div>
<div 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>
</div>
</div>
<!-- 问题9 -->
<div class="swiper-slide">
<div class="quetion">
<h3>9</h3>
</div>
<div 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>
</div>
</div>
<!-- 问题10 -->
<div class="swiper-slide">
<div class="quetion">
<h3>10</h3>
</div>
<div 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>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 第三页 -->
<section class="page3">
<div class="result">
<p id="result"></p>
</div>
</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>
解决方案
类似这种没有完成动作的计算（例如：点击提交问卷，就是一种完成动作，可以在这时候去计算总分），你需要在每一次操作的时候计算总分，如果有使用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;
}
}
}这篇关于javascript - 如何实现选择不同的单选项分别加上不同的分数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
