定位汽车问题

最新推荐文章于 2024-09-22 11:17:00 发布

火休

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量297

点赞数

分类专栏： javascript 文章标签： javascript 决策树二叉树面向对象

本文链接：https://blog.csdn.net/qq_31046447/article/details/70643441

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

编写一个程序，通过一系列问题引导用户定位汽车存在的问题。使用决策树来构建该系统：

此问题来自《挑战编程技能：57道程序员功力测试题》

这是第一次用二叉树，里面的树生成的方式还是套用的数组循环，效率不高没有用的二叉树的一些特性。这里主要为了测验jquery和js的新学的知识点来完成实例。

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <meta name=description content="定位汽车问题">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>定位汽车问题</title>
    <script src="../vendor/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        // 问题对象
        var Question = function(preQuestion, content, yes, no) {
            var content = content,
                yes = yes,
                no = no,
                prev = preQuestion,
                that = this;
            return {
                getContent: function() {
                    return content;
                },
                getYes: function() {
                    return yes;
                },
                getNo: function() {
                    return no;
                },
                getPrev: function() {
                    return prev;
                },
                setYes: function(Yes) {
                    yes = Yes;
                },
                setNo: function(No) {
                    no = No;
                },
                setPrve: function(preQuestion) {
                    prev = preQuestion;
                }
            };
        };
        // 问题点
        var questionList = [
            'Is the car silent when you turn the key?',
            'Are the battery terminals corroded?',
            'Does the car make a clicking noise?',
            'Clean terminals and try starting again.',
            'Replace cables and try again.',
            'Replace the battery.',
            'Does the car crank up but fail to start?',
            'Check spark plug connections.',
            'Does the engine start and then die?',
            'Does your car have fuel injection?',
            'Get it in for service.',
            'Check to ensure the choke is opening and closing.'
        ];
        // 根据层次创建树的节点二维数组
        var questions = [
            [
                new Question(0, questionList[0], 1, 1)
            ],
            [
                new Question(1, questionList[1], 1, 1),
                new Question(1, questionList[2], 1, 1)
            ],
            [
                new Question(1, questionList[3], 0, 0),
                new Question(1, questionList[4], 0, 0),
                new Question(1, questionList[5], 0, 0),
                new Question(1, questionList[6], 1, 1)
            ],
            [
                new Question(1, questionList[7], 0, 0),
                new Question(1, questionList[8], 1, 0)
            ],
            [
                new Question(1, questionList[9], 1, 1)
            ],
            [
                new Question(1, questionList[10], 0, 0),
                new Question(1, questionList[11], 0, 0)
            ],
        ];
        // 建立树的层次关系
        var nodeQ = function() {
            var cou;
            var tier = 0;
            var nextCou;
            var parent, child;
            var length;
            while (tier < questions.length) {
                if (!parent && tier === 0) {
                    parent = questions[0][0];
                    parent.setYes(questions[1][0]);
                    parent.setNo(questions[1][1]);
                    console.log("aaa:" + parent.getYes());
                } else {
                    length = questions[tier].length;
                    nextCou = 0;
                    for (cou = 0; cou < length; cou++) {
                        parent = questions[tier][cou];
                        if (parent.getYes()) {
                            child = questions[tier + 1][nextCou++];
                            parent.setYes(child);
                            child.setPrve(parent);
                        }
                        if (parent.getNo()) {
                            child = questions[tier + 1][nextCou++];
                            parent.setNo(child);
                            child.setPrve(parent);
                        }
                    }
                }
                tier++;
            }
            return questions[0][0];
        }();
        $("#question p:first").html(questions[0][0].getContent());
        //给radio绑定点击事件，事件内迭代树
        var clickR = function() {
            console.log("click:");
            var nodeP;
            if ($(this).val() === 'yes') {
                nodeP = nodeQ.getYes();
            } else if ($(this).val() === 'no') {
                nodeP = nodeQ.getNo();
            } else {
                return
            }
            console.log(nodeQ);
            console.log(typeof nodeQ);
            if (typeof nodeP === "object") {
                nodeQ = nodeP;
                $("#question").append("<p>" + nodeQ.getContent() + "</p>");
                if (nodeQ.getYes() || nodeQ.getNo()) {
                    $("#question").append('<p><input type="radio" name="q1" value="yes"> <label>是</label> <input type="radio"name="q1"value="no"> <label>否</label>');
                    $("#question p:last input:radio").click(clickR);
                }
            } else {
                return;
            }
            $(this).off("click");
        };
        $("#question p:last input:radio").click(clickR);
    });
    </script>
    <style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }
    
    #question {
        width: 500px;
        margin: 5px auto auto auto;
        box-shadow: 0px 1px 4px #272822;
    }
    
    p {
        margin: 1px 0px;
        background-color: #EAEBED;
    }
    </style>
</head>

<body>
    <div id="question">
        <p></p>
        <p>
            <input type="radio" name="q1" value="yes">
            <label>是</label>
            <input type="radio" name="q1" value="no">
            <label>否</label>
        </p>
    </div>
</body>

</html>