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>测试肌肤属性</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>
高洛峰2017-05-19 10:32:27
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();
}
}