基于HTML的故障排除决策树

时间:2015-09-15 17:18:00

标签: javascript html css decision-tree

我是新手,在HTML和J.script上创建复杂的代码,我一直在处理服务器硬件维护和解决操作系统问题4年。我想创建一个基于Web的故障排除决策树,我可以在线托管,以帮助任何有需要的人在服务器上执行逻辑故障排除。我能够从twoseven.co.nz得到一个示例代码,(丹礼貌)符合我的要求,但我认为我做错了。

我能够正确地获得输出,直到question_1_2_2,

虽然它没有继续,但没有显示step3 option21的输出

我添加了代码,如果有人能指出我正确的方向,那就太好了。提前谢谢。

    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>Decision Tree - Server Logical Troubleshooting</title>
      
      
      <script type='text/javascript' src='https://code.jquery.com/jquery-1.5.js'></script>
      
      <style type='text/css'>
        fieldset {margin:10px 0;}
    .hide {display:none;}
    
      </style>
<!--
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
<!-- commented out external stylesheets due to relative URLs.
-->        
    
    
    <script type='text/javascript'>//<![CDATA[
    
    var base = {
        productFilterSetup: function() {
            $('.productFilter').each(
            function() {
                var tmp = new base.filterGroup(this);
                tmp.setup();
            });
        },
        filterGroup: function(filter_group) {
            var me = this;
            me.target_element = filter_group;
            me.active_element_index = 0;
            me.setup = function() {
                $(filter_group).find('input[type=radio]').bind('click', function() {
                    me.update(this);
                });
            };
            me.update = function(target_radio) {
                var fieldsets = $(me.target_element).find('fieldset'),
                    len = fieldsets.length,
                    i = 0,
                    j = 0,
                    radios, 
                    radios_len, 
                    options = [],
                    options_buffer = '',
                    num_of_steps = 0;
    
                for (i = 1; i <= num_of_steps + 1; i += 1) {
                    if ($('fieldset.step' + i).length > 0) {
                        num_of_steps += 1;
                    }
                }
    
                for (i = 0; i < num_of_steps; i += 1) {
                    if ($(target_radio).parents('fieldset.step' + (i + 1)).length > 0) {
                        for (j = i; j < num_of_steps; j += 1) {
                            $('fieldset.step' + (j + 2) + ' input[type=radio]').attr('checked', false);
                        }
                    }
                }
    
                for (i = 0; i < len; i += 1) {
                    radios = $(fieldsets[i]).find('input[type=radio]');
                    radios_len = radios.length;
                    for (j = 0; j < radios_len; j += 1) {
                        if ($(radios[j]).is(':checked')) {
                            options.push(j + 1);
                        }
                    }
                }
                fieldsets.addClass('hide');
                $('fieldset.option0').removeClass('hide');
                for (i = 0; i < options.length; i += 1) {
                    options_buffer += options[i];
                    $('fieldset.option' + options_buffer).removeClass('hide');
                }
            };
        }
    };
    
    $(
    function() {
        base.productFilterSetup();
    });
    //]]> 
    
    </script>
    
    </head>
    <body>
    <h4>No POWER</h4>
      <form action="#" id="unique_id" class="productFilter">
        <fieldset class="step1 option0">
            <legend>Is the Server in a Rack?</legend>
            <p>
                <input id="question_1" name="group_1" type="radio" />
                <label for="question_1">Yes!</label>
            </p>
            <p>
                <input id="question_2" name="group_1" type="radio"/>
                <label for="question_2">No.</label>
            </p>
        </fieldset>
        <fieldset class="hide step2 option1">
            <legend>Are other servers in the Rack receiving Power?</legend>
            <p>
                <input id="question_1_1" name="group_2" type="radio" />
                <label for="question_1_1">Yes</label>
            </p>
            <p>
                <input id="question_1_2" name="group_2" type="radio" />
                <label for="question_1_2">No</label>
            </p>
        </fieldset>
        <fieldset class="hide step2 option2">
            <legend>Try Different Wall Sockets, Still No Power</legend>
            <p>
                <input id="question_2_1" name="group_3" type="radio" />
                <label for="question_2_1">Yes</label>
            </p>
            <p>
                <input id="question_2_2" name="group_3" type="radio" />
                <label for="question_2_2">No</label>
            </p>
        </fieldset>
        <fieldset class="hide step3 option11">
            <legend>The Rack Power is fine, Try different power sockets in Rack, Still No Power?</legend>
            <p>
                <input id="question_1_1_1" name="group_4" type="radio"/>
                <label for="question_1_1_1">Yes</label>
            </p>
            <p>
                <input id="question_1_1_2" name="group_4" type="radio"/>
                <label for="question_1_1_2">No</label>
            </p>
        </fieldset>
        <fieldset class="hide step3 option12">
            <legend>Check Rack Power (PDU) and Main Power and UPS</legend>
            <p>
                <input id="question_1_2_1" name="group_5" type="radio"/>
                <label for="question_1_2_1">Yes</label>
            </p>
            <p>
                <input id="question_1_2_2" name="group_5" type="radio" />
                <label for="question_1_2_2">No</label>
            </p>
        </fieldset>
        <fieldset class="hide step3 option21">
            <legend>Reseat the power cables on the server PSU ,Still No Power</legend>
            <p>
                <input id="question_2_1_1" name="group_6" type="radio" />
                <label for="question_2_1_1">Yes</label>
            </p>
            <p>
                <input id="question_2_1_2" name="group_6" type="radio" />
                <label for="question_2_1_2">No</label>
            </p>
        </fieldset>
        <fieldset class="hide step3 option22">
            <legend>Its an Issue with the wall socket</legend>
            <p>
                <input id="question_2_2_1" name="group_7" type="radio" />
                <label for="question_2_2_1">Resolved</label>
            </p>
            <p>
                <input id="question_2_2_2" name="group_7" type="radio" />
                <label for="question_2_2_2">No</label>
            </p>
        </fieldset>
    </form>
    <p>Troubleshooting Flowchart</p>
    <a title="A button." href="#" class="buttonGreen"><span></span></a>
      
    </body>
    
    </html>

0 个答案:

没有答案