Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
465 views
in Technique[技术] by (71.8m points)

如何实现选择不同的单选项分别加上不同的分数

我一共有十个题目,分别有ABCD四个选项,然后不同的选项加上不同的分数,在最后根据不同的分数得出不同的结果,但是不知道如何实现,以下是我的代码

<!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">
        <div class="swipers logo">
            <div class="welcome">
                <h3>主标题</h3>
                <p>副标题</p>
            </div>
            <a href="#" class="start">开始测试</a>
        </div>
    </section>

    <!-- 第二页 -->
    <section class="page2">
        <header class="head">
            <div class="swiper-pagination swiper-pagination-bullets pagination">
            </div>
        </header>
        <div class="swipers">
            <div class="swiper-container swiper-container-horizontal">
                <div class="swiper-wrapper">
                    <!-- 问题1 -->
                    <div class="swiper-slide">
                        <div class="quetion">
                            <h3>1</h3>
                        </div>
                        <div 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>
                        </div>
                    </div>

                    <!-- 问题2 -->
                    <div class="swiper-slide">
                        <div class="quetion">
                            <h3>2</h3>
                        </div>
                        <div 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>
                        </div>
                    </div>

                    <!-- 问题3 -->
                    <div class="swiper-slide">
                        <div class="quetion">
                            <h3>3</h3>
                        </div>
                        <div 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>
                        </div>
                    </div>

                    <!-- 问题4 -->
                    <div class="swiper-slide">
                        <div class="quetion">
                            <h3>4</h3>
                        </div>
                        <div 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>
                        </div>
                    </div>

                    <!-- 问题5 -->
                    <div class="swiper-slide">
                        <div class="quetion">
                            <h3>5</h3>
                        </div>
                        <div 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>
                        </div>
                    </div>

                    <!-- 问题6 -->
                    <div class="swiper-slide">
                        <div class="quetion">
                            <h3>6</h3>
                        </div>
                        <div 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>
                        </div>
                    </div>

                    <!-- 问题7 -->
                    <div class="swiper-slide">
                        <div class="quetion">
                            <h3>7</h3>
                        </div>
                        <div 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>
                        </div>
                    </div>

                    <!-- 问题8 -->
                    <div class="swiper-slide">
                        <div class="quetion">
                            <h3>8</h3>
                        </div>
                        <div 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>
                        </div>
                    </div>

                    <!-- 问题9 -->
                    <div class="swiper-slide">
                        <div class="quetion">
                            <h3>9</h3>
                        </div>
                        <div 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>
                        </div>
                    </div>

                    <!-- 问题10 -->
                    <div class="swiper-slide">
                        <div class="quetion">
                            <h3>10</h3>
                        </div>
                        <div 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>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>

    <!-- 第三页 -->
    <section class="page3">
        <div class="result">
            <p id="result"></p>
        </div>
    </section>


    <!-- third-party javascript -->
    <script src="js/jq/jquery-3.1.1.min.js"></script>
    <script src="js/siwper/swiper.min.js"></script

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

类似这种没有完成动作的计算(例如:点击提交问卷,就是一种完成动作,可以在这时候去计算总分),你需要在每一次操作的时候计算总分,如果有使用Vue,用计算属性就很漂亮了~

所以上面的点击事件需要更改:(代码还没有验证,但思路是那样)

//记分设置
$(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;
        }
    }
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...