Ich mache eine Online-Fragebogenumfrage über das Swiper-Plugin. Eine Voraussetzung ist, dass die Schaltfläche für die nächste Frage erst angezeigt wird, wenn der Benutzer eine Option auswählt. Übergeben Sie dann die vorherige Frage, klicken Sie erneut auf die Schaltfläche „Nächste Frage“ in der zweiten Frage-Oberfläche. Das Folgende ist 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>
<p class="questionNumber">1/11</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">
<p class="labelContainer">
<label>
<input type="radio" class="a" name="1" value="1">aaaaa
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="b" name="1" value="2">bbbbb
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="c" name="1" value="3">ccccc
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="d" name="1" value="4">ddddd
</label>
</p>
</p>
</p>
<!-- 问题2 -->
<p class="swiper-slide">
<p class="question">
<h3>2</h3>
</p>
<p class="choice">
<p class="labelContainer">
<label>
<input type="radio" class="a" name="2" value="1">aaaaa
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="b" name="2" value="2">bbbbb
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="c" name="2" value="3">ccccc
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="d" name="2" value="4">ddddd
</label>
</p>
</p>
</p>
<!-- 问题3 -->
<p class="swiper-slide">
<p class="question">
<h3>3</h3>
</p>
<p class="choice">
<p class="labelContainer">
<label>
<input type="radio" class="a" name="3" value="1">aaaaa
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="b" name="3" value="2">bbbbb
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="c" name="3" value="3">ccccc
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="d" name="3" value="4">ddddd
</label>
</p>
</p>
</p>
<!-- 问题4 -->
<p class="swiper-slide">
<p class="question">
<h3>4</h3>
</p>
<p class="choice">
<p class="labelContainer">
<label>
<input type="radio" class="a" name="4" value="1">aaaaa
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="b" name="4" value="2">bbbbb
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="c" name="4" value="3">ccccc
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="d" name="4" value="4">ddddd
</label>
</p>
</p>
</p>
<!-- 问题5 -->
<p class="swiper-slide">
<p class="question">
<h3>5</h3>
</p>
<p class="choice">
<p class="labelContainer">
<label>
<input type="radio" class="a" name="5" value="1">aaaaa
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="b" name="5" value="2">bbbbb
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="c" name="5" value="3">ccccc
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="d" name="5" value="4">ddddd
</label>
</p>
</p>
</p>
<!-- 问题6 -->
<p class="swiper-slide">
<p class="question">
<h3>6</h3>
</p>
<p class="choice">
<p class="labelContainer">
<label>
<input type="radio" class="a" name="6" value="1">aaaaa
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="b" name="6" value="2">bbbbb
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="c" name="6" value="3">ccccc
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="d" name="6" value="4">ddddd
</label>
</p>
</p>
</p>
<!-- 问题7 -->
<p class="swiper-slide">
<p class="question">
<h3>7</h3>
</p>
<p class="choice">
<p class="labelContainer">
<label>
<input type="radio" class="a" name="7" value="1">aaaaa
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="b" name="7" value="2">bbbbb
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="c" name="7" value="3">ccccc
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="d" name="7" value="4">ddddd
</label>
</p>
</p>
</p>
<!-- 问题8 -->
<p class="swiper-slide">
<p class="question">
<h3>8</h3>
</p>
<p class="choice">
<p class="labelContainer">
<label>
<input type="radio" class="a" name="8" value="1">aaaaa
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="b" name="8" value="2">bbbbb
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="c" name="8" value="3">ccccc
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="d" name="8" value="4">ddddd
</label>
</p>
</p>
</p>
<!-- 问题9 -->
<p class="swiper-slide">
<p class="question">
<h3>9</h3>
</p>
<p class="choice">
<p class="labelContainer">
<label>
<input type="radio" class="a" name="9" value="1">aaaaa
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="b" name="9" value="2">bbbbb
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="c" name="9" value="3">ccccc
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="d" name="9" value="4">ddddd
</label>
</p>
</p>
</p>
<!-- 问题10 -->
<p class="swiper-slide">
<p class="question">
<h3>10</h3>
</p>
<p class="choice">
<p class="labelContainer">
<label>
<input type="radio" class="a" name="10" value="1">aaaaa
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="b" name="100" value="2">bbbbb
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="c" name="10" value="3">ccccc
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="d" name="10" value="4">ddddd
</label>
</p>
</p>
</p>
<!-- 问题11 -->
<p class="swiper-slide">
<p class="question">
<h3>11</h3>
</p>
<p class="choice">
<p class="labelContainer">
<label>
<input type="radio" class="a" name="11" value="1">aaaaa
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="b" name="11" value="2">bbbbb
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="c" name="11" value="3">ccccc
</label>
</p>
<p class="labelContainer">
<label>
<input type="radio" class="d" name="11" value="4">ddddd
</label>
</p>
</p>
</p>
</p>
<p class="swiper-button-prev"></p>
<p class="swiper-button-next"></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(){
//选中选项样式设置
$(".choice input[type = 'radio']").on("click",function(){
if ($(".choice input:checked")){
$(this).parents('.swiper-wrapper').siblings().css('display','block');
$(this).parents("p.labelContainer").css("background" , "red").siblings().css("background","");
$('.swiper-button-next').css('display','block');
}
});
$('.swiper-button-prev').on('click',function(){
$('.swiper-button-next').show();
});
});
//swiper设置
var mySwiper = new Swiper (".swiper-container", {
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
slidesPerView: 1,
spaceBetween: 0,
loop: false,
onlyExternal : true,
onSlideChangeStart:function(){
$('.swiper-button-next').hide();
}
});
//问题页面隐藏设置
$(".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,700)
},1000);
$('.questionNumber').html(this_active+2);
});
//选项全选设置
$('.swiper-button-next').click(function(){
var checkedLength = $('.choice input:checked').length;
var length = $('.question'.length);
if(checkedLength == length){
$(".page2").hide();
$(".page3").show();
}
});
</script>
</body>
</html>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
换成