我是新手,在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>