- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
Je réalise une enquête par questionnaire en ligne via le plug-in swiper. Une exigence est que le bouton de la question suivante ne s'affiche pas tant que l'utilisateur n'a pas sélectionné une option. Mais maintenant, je rencontre un problème : si je réponds à la troisième question, puis passez la question précédente. Une fois que le bouton est revenu à la première question, cliquez à nouveau sur le bouton de la question suivante. Enfin, le bouton de la question suivante dans l'interface de la deuxième question disparaîtra. Comment cela peut-il être résolu ?
<!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();
}Remplacé par
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();
}
}