- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
Saya menggunakan pemalam swiper untuk menjalankan soal selidik dalam talian Satu keperluan ialah butang untuk soalan seterusnya akan dipaparkan hanya selepas pengguna memilih pilihan Tetapi sekarang saya menghadapi masalah yang jika saya menjawab soalan ketiga, kemudian lulus soalan sebelumnya. Selepas butang kembali ke soalan pertama, klik butang soalan seterusnya Akhir sekali, butang soalan seterusnya dalam antara muka soalan kedua akan hilang.
<!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();
}Digantikan dengan
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();
}
}