J'ai un total de dix questions, chacune avec quatre options ABCD, puis différentes options et différents scores. En fin de compte, différents résultats sont obtenus en fonction de différents scores, mais je ne sais pas comment les mettre en œuvre. mon 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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Similaire à ce genre de calcul sans terminer l'action (par exemple : cliquer pour soumettre le questionnaire est une action de réalisation, et vous pouvez calculer le score total à ce moment-là. Vous devez calculer le score total pour chaque opération). . Si vous utilisez Vue, utiliser des propriétés calculées est très beau~
.L'événement de clic ci-dessus doit donc être modifié : (Le code n'a pas encore été vérifié, mais l'idée est la suivante)
Lorsque vous cliquez, vous devez ajouter un identifiant pour déterminer si l'option a été modifiée - sinon la personne qui pose la question continuera à basculer entre abcd et vos résultats seront accumulés, ce qui sera compliqué. Le résultat final doit être basé sur. chaque segment de score - utilisez Switch ou un tas d'éléments si cela dépend de vous