javascript - Bagaimana untuk membuat tinjauan dalam talian melalui jQuery
世界只因有你
世界只因有你 2017-05-19 10:35:56
0
6
770

Saya bercadang untuk membuat soal selidik bahagian hadapan tulen dalam talian Terdapat sepuluh soalan secara keseluruhannya. Memilih A akan mendapat satu mata, memilih B akan mendapat dua mata, memilih C akan mendapat tiga mata, memilih D akan mendapat empat mata, dan kemudian. keputusan akan muncul terus pada akhirnya, I Masalah yang dihadapi ialah selepas pengguna memilih A dalam soalan pertama, jika dia kemudian menukar jawapannya kepada B, markahnya tidak akan dikurangkan sebanyak satu mata dan kemudian ditambah dengan. dua mata. Apakah kaedah yang boleh digunakan untuk menyelesaikan soalan ini? Terima kasih

<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="question">
                            <h3>1</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="1" value="1"><span class="aFont">aaaaa</span>
                            </label>
                            <label>
                                <input type="radio" class="b" name="1" value="2"><span class="bFont">bbbbb</span>
                            </label>
                            <label>
                                <input type="radio" class="c" name="1" value="3"><span class="cFont">ccccc</span>
                            </label>
                            <label>
                                <input type="radio" class="d" name="1" value="4"><span class="dFont">ddddd</span>
                            </label>
                        </p>
                    </p>

                    <!-- 问题2 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <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="question">
                            <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="question">
                            <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="question">
                            <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="question">
                            <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="question">
                            <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="question">
                            <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="question">
                            <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="question">
                            <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>

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

                </p>
            </p>
        </p>
    </section>

    <!-- 第三页 -->
    <section class="page3">
        <p class="result">
            <p id="result">这是结果</p>
        </p>
    </section>
</body>
<script>
        //记分设置
        $(document).ready(function(){
            $(".choice input[type = 'radio']").on("click",count);
        });
        //count设置

        function count(){
            var localResult = 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 = score + 1;
                            break;
                        case "b":
                            score = score + 2;
                            break;
                        case "c":
                            score = score + 3;
                            break;
                        case "d":
                            score = score + 4;
                            break;
                        default :
                            break;
                    }
                    localResult += score;
                }
            }
            console.log(localResult);
            if (localResult <= 10){
                $("#result").text("小于等于10")
            }else if (localResult <= 20){
                $("#result").text("小于等于20")
            }else if (localResult <= 30){
                $("#result").text("小于等于30")
            }else{
                $("#result").text("小于等于40")
            }
        }
</script>
世界只因有你
世界只因有你

membalas semua(6)
我想大声告诉你

//Hanya untuk soalan aneka pilihan anda, dan setiap soalan mempunyai nilai
//Walaupun anda berkata terdapat sepuluh soalan dan kod yang anda siarkan ialah 11, panjangnya tetap 10

$(document).ready(function() {
    //存储选项值
    var valueArr = [];
    //总分值
    var value = 0;
    //已选长度
    var checkedLength;
    //题目个数
    var length = 10;
    //分值存入valueArr
    function count() {
        var $parent = $(this).parents('.swiper-slide');
        console.log($parent,$parent.index('.swiper-slide'))
        valueArr[$parent.index('.swiper-wrapper .swiper-slide')] = $(this).val();
        //触发自定义事件
        $('.swiper-wrapper').trigger('valueChange');
    }
    //点击触发计分
    $(".choice input[type = 'radio']").on("click", count);
    //绑定自定义事件
    $('.swiper-wrapper').on('valueChange',function(){
        checkedLength = $('.choice input:checked').length;
        //判断是否全选
        if(checkedLength==length){
            value = 0;
            console.log(valueArr)
            valueArr.forEach(function(i){
                value += Number(i);
            })
            $('#result').html(value);
        }
    })
});
phpcn_u1582

Tidakkah dia boleh menambah nilai semua input semasa menghantar soal selidik

小葫芦

Sebenarnya, ia tidak boleh dikira seperti ini. Apabila mengira skor pengguna, kita perlu mengira semula Jika kita melakukan ini, bagaimana situasi seperti -1+2 boleh muncul? Ini mungkin pengumpulan semula

阿神

Jika jumlah markah muncul selepas 10 soalan telah dipilih, bukankah bagus untuk mendapatkan markah yang sepadan dengan jawapan yang dipilih untuk semua soalan pada penghujungnya. Jika tidak perlu memilih, tambahkannya dengan segera?

世界只因有你

Untuk soalan 11, tidak kira bagaimana anda mengklik, markah tidak akan ditambah atau ditolak.

Disebabkan anda tidak mengiranya, kod tidak perlu ditukar, cuma tukar 10 kepada 11.

<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
<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="question">
                            <h3>1</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="1" value="1"><span class="aFont">aaaaa</span>
                            </label>
                            <label>
                                <input type="radio" class="b" name="1" value="2"><span class="bFont">bbbbb</span>
                            </label>
                            <label>
                                <input type="radio" class="c" name="1" value="3"><span class="cFont">ccccc</span>
                            </label>
                            <label>
                                <input type="radio" class="d" name="1" value="4"><span class="dFont">ddddd</span>
                            </label>
                        </p>
                    </p>

                    <!-- 问题2 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <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="question">
                            <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="question">
                            <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="question">
                            <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="question">
                            <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="question">
                            <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="question">
                            <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="question">
                            <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="question">
                            <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>

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

                </p>
            </p>
        </p>
    </section>

    <!-- 第三页 -->
    <section class="page3">
        <p class="result">
            <p id="result">这是结果</p>
        </p>
    </section>
</body>
<script>
        //记分设置
        $(document).ready(function(){
            $(".choice input[type = 'radio']").on("click",count);
        });
        //count设置

        function count(){
            var localResult = 0;
            for (var i = 1;i <= 11;i++){
                var option = $(".choice input[name = '"+i+"']:checked");
                if (option.attr("class")){
                    var score = 0;
                    switch (option.attr("class")){
                        case "a":
                            score = score + 1;
                            break;
                        case "b":
                            score = score + 2;
                            break;
                        case "c":
                            score = score + 3;
                            break;
                        case "d":
                            score = score + 4;
                            break;
                        default :
                            break;
                    }
                    localResult += score;
                }
            }
            console.log(localResult);
            if (localResult <= 10){
                $("#result").text("小于等于10")
            }else if (localResult <= 20){
                $("#result").text("小于等于20")
            }else if (localResult <= 30){
                $("#result").text("小于等于30")
            }else{
                $("#result").text("小于等于40")
            }
        }
</script>
phpcn_u1582
$(function(){
            var item = {};
            item.length = 0;
            $("input").click(function(){//绑定点击事件
                if(!($(this).attr("name") in item)){
                    item.length = item.length + 1;
                }
                item[$(this).attr("name")] = $(this).attr("class");
                //console.log(item);
                
                if(item.length === 11){
                    countScore();
                }
            })
            function countScore(){//统计得分
                var total = 0;
                for(var i in item){
                    switch (item[i]){
                        case "a":
                            total = total+1;
                            break;
                        case "b":
                            total = total+2;
                            break;
                        case "c":
                            total = total+3;
                            break;
                        case "d":
                            total = total+4;
                            break;
                        default:
                            break;
                    }
                }
                console.log(total);
            } 
        })
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan