javascript - Comment sélectionner différentes options uniques et ajouter respectivement différents scores
PHP中文网
PHP中文网 2017-05-19 10:45:43
0
2
713

J'ai un total de dix questions, chacune avec quatre options ABCD, puis différentes options et différents scores. En fin de compte, différents résultats sont obtenus en fonction de différents scores, mais je ne sais pas comment les mettre en œuvre. mon 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 class="head">
            <p class="swiper-pagination swiper-pagination-bullets pagination">
            </p>
        </header>
        <p class="swipers">
            <p class="swiper-container swiper-container-horizontal">
                <p class="swiper-wrapper">
                    <!-- 问题1 -->
                    <p class="swiper-slide">
                        <p class="quetion">
                            <h3>1</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="1">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="1">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="1">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="1">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题2 -->
                    <p class="swiper-slide">
                        <p class="quetion">
                            <h3>2</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="2">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="2">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="2">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="2">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题3 -->
                    <p class="swiper-slide">
                        <p class="quetion">
                            <h3>3</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="3">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="3">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="3">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="3">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题4 -->
                    <p class="swiper-slide">
                        <p class="quetion">
                            <h3>4</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="4">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="4">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="4">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="4">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题5 -->
                    <p class="swiper-slide">
                        <p class="quetion">
                            <h3>5</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="5">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="5">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="5">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="5">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题6 -->
                    <p class="swiper-slide">
                        <p class="quetion">
                            <h3>6</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="6">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="6">b
                            </label>
                                <label>
                                <input type="radio" class="c" name="6">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="6">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题7 -->
                    <p class="swiper-slide">
                        <p class="quetion">
                            <h3>7</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="7">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="7">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="7">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="7">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题8 -->
                    <p class="swiper-slide">
                        <p class="quetion">
                            <h3>8</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="8">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="8">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="8">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="8">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题9 -->
                    <p class="swiper-slide">
                        <p class="quetion">
                            <h3>9</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="9">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="9">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="9">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="9">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题10 -->
                    <p class="swiper-slide">
                        <p class="quetion">
                            <h3>10</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="10">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="10">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="10">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="10">d
                            </label>
                        </p>
                    </p>

                </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(){
            var result = 0;
            $('.a').click(function(){
                result = result + 1;
                console.log(result);
            });
            $('.b').click(function(){
                result = result + 2;
                console.log(result);
            });
            $('.c').click(function(){
                result = result + 3;
                console.log(result);
            });
            $('.d').click(function(){
                result = result + 4;
                console.log(result);
            });


        });

        //swiper设置
        var mySwiper = new Swiper (".swiper-container", {
            pagination: '.swiper-pagination',
            paginationBulletRender: function (swiper, index, className) {
                return '<span class="' + className + '">' + (index + 1) + '</span>';
            },
            slidesPerView: 1,
            paginationClickable: true,
            spaceBetween: 0,
            loop: false,
            onReachEnd: function(swiper){
                $(".page2").hide();
                $(".page3").show();
            }
        });

        $(".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,500)
            },500);

        });

        $('.swiper-button-next').click(function(){
            if(mySwiper .isEnd){
                $(" .page2").hide();
                $(" .page3").show();
                $("#result").value = result;
            }
        });

        $('span:last').css("display","none");


    </script>
</body>
</html>
PHP中文网
PHP中文网

认证高级PHP讲师

répondre à tous(2)
过去多啦不再A梦

Similaire à ce genre de calcul sans terminer l'action (par exemple : cliquer pour soumettre le questionnaire est une action de réalisation, et vous pouvez calculer le score total à ce moment-là. Vous devez calculer le score total pour chaque opération). . Si vous utilisez Vue, utiliser des propriétés calculées est très beau~

.

L'événement de clic ci-dessus doit donc être modifié : (Le code n'a pas encore été vérifié, mais l'idée est la suivante)

//记分设置
$(document).ready(function(){
    var result = 0;
    $('.a').click(function(){
        result = result + 1;
        console.log(result);
    });
    $('.b').click(function(){
        result = result + 2;
        console.log(result);
    });
    $('.c').click(function(){
        result = result + 3;
        console.log(result);
    });
    $('.d').click(function(){
        result = result + 4;
        console.log(result);
    });
});

// 修改为:
$(document).ready(function(){
    $(".choice input[type='radio']").on('click', count);
});

var result = 0;
function count() {
    var _result = 0;
    for (var i = 1; i <= 10; i++) {
        var option = $(".choice input[name='"+i+"']:checked"); // 选中的选项
        if (option.attr("class")) {
            var score = 0;
            switch(option.attr("class")) {
                case "a":
                    score = 1;
                    break;
                case "b":
                    score = 2;
                    break;
                case "c":
                    score = 3;
                    break;
                case "d":
                    score = 4;
                    break;
                default:
                    break;
            }
            _result += score;
        }
    }
}
阿神

Lorsque vous cliquez, vous devez ajouter un identifiant pour déterminer si l'option a été modifiée - sinon la personne qui pose la question continuera à basculer entre abcd et vos résultats seront accumulés, ce qui sera compliqué. Le résultat final doit être basé sur. chaque segment de score - utilisez Switch ou un tas d'éléments si cela dépend de vous

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal