javascript - swiper插件問題
PHPz
PHPz 2017-05-19 10:30:27
0
1
715

我透過swiper外掛程式做線上問卷調查,有一個需求是用戶選中了選項後,下一題的按鈕才會顯示出來,但是現在遇到一個問題就是如果我回答到了第三題,然後透過上一題按鈕回到第一題後,再點選下一題按鈕,最後第二題的介面中的下一題按鈕會消失,請問這個可以用什麼方法解決
以下是我的程式碼

<!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>
PHPz
PHPz

学习是最好的投资!

全部回覆(1)
小葫芦
onSlideChangeStart:function(){
    $('.swiper-button-next').hide();
}

換成

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();
    }
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板