masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
javascript - Bagaimana untuk memilih pilihan tunggal yang berbeza dan menambah markah yang berbeza masing-masing
PHP中文网
PHP中文网 2017-05-19 10:45:43
0
2
691

Saya mempunyai sepuluh soalan, setiap satu dengan empat pilihan ABCD, dan kemudian pilihan yang berbeza ditambah markah yang berbeza Pada akhirnya, keputusan yang berbeza diperolehi berdasarkan markah yang berbeza, tetapi saya tidak tahu bagaimana untuk melaksanakannya kod saya

<!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讲师

membalas semua(2)
过去多啦不再A梦
过去多啦不再A梦2017-05-19 10:47:43 Tingkat 2

Serupa dengan pengiraan jenis ini tanpa melengkapkan tindakan (contohnya: mengklik untuk menyerahkan soal selidik ialah tindakan yang lengkap, dan anda boleh mengira jumlah markah pada masa ini Anda perlu mengira jumlah markah untuk setiap operasi guna Vue, guna Computed properties sangat cantik~

Jadi acara klik di atas perlu diubah: (Kod belum disahkan lagi, tetapi ideanya ialah)

//记分设置
$(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;
        }
    }
}
Suka +0
Tambah Balasan
阿神
阿神2017-05-19 10:47:43 Tingkat 1

Apabila anda mengklik, anda perlu menambah pengecam untuk menentukan sama ada pilihan telah ditukar - jika tidak, orang yang melakukan soalan akan terus bertukar antara abcd dan keputusan anda akan terkumpul, yang akan menjadi kucar-kacir mesti berdasarkan setiap segmen skor - - Gunakan suis atau sekumpulan eles jika terpulang kepada anda

.
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan