I do online questionnaires through the swiper plug-in. One requirement is that the button for the next question will be displayed only after the user selects an option. But now I encounter a problem that if I answer the third question, then through the above After the first question button returns to the first question, and then click the next question button, the next question button in the second question interface will disappear. How can this be solved?
The following is my code
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>測(cè)試肌膚屬性</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>
<!-- 第一頁(yè) -->
<section class="page1">
<p class="swipers logo">
<p class="welcome">
<h3>主標(biāo)題</h3>
<p>副標(biāo)題</p>
</p>
<a href="#" class="start">開始測(cè)試</a>
</p>
</section>
<!-- 第二頁(yè) -->
<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>
<!-- 第三頁(yè) -->
<section class="page3">
<p class="result">
<p id="result">這是結(jié)果</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(){
//選中選項(xiàng)樣式設(shè)置
$(".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設(shè)置
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();
}
});
//問題頁(yè)面隱藏設(shè)置
$(".page2 , .page3").hide();
//開始按鈕設(shè)置
$(".start").on("click",function(){
$(" .page1").hide();
$(" .page2").show();
});
//點(diǎn)擊選項(xiàng)滑動(dòng)界面設(shè)置
$(".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);
});
//選項(xiàng)全選設(shè)置
$('.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>
1
0
0
學(xué)習(xí)是最好的投資！
onSlideChangeStart:function(){
$('.swiper-button-next').hide();
}Replaced with
onTransitionStart: function(e) {
var index = e.activeIndex,
checked = $('.swiper-slide').eq(index).find(':checked')
console.log(checked);
if (checked.length) {
$('.swiper-button-next').show();
} else {
$('.swiper-button-next').hide();
}
}
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
