Question

下面是我的方式，虽然是创建决策树的基本方法......问题是CSS已经失控，代码很糟糕......有更好的方法吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#SwitchPicker .title{
width: 100%;
margin:auto;
text-align:center;
}
#SwitchPicker .twinanswer{
width:400px;
background:url(images/2ans.jpg) no-repeat;
margin:auto;
height:110px;
}
#SwitchPicker .answer-bottom-left {
padding-top:90px;
width:50%;
float:left;
}
#SwitchPicker .answer-bottom-right {
padding-top:90px;
width:50%;
float:left;
text-align:right;
}
#SwitchPicker .trioanswer{
width:400px;
background:url(images/3ans.jpg) no-repeat;
margin:auto;
height:110px;
}
#SwitchPicker .trio-answer-bottom-left {
padding-top:90px;
width:33%;
float:left;
}
#SwitchPicker .trio-answer-bottom-mid {
padding-top:90px;
width:33%;
float:left;
text-align:center;
}
#SwitchPicker .trio-answer-bottom-right {
padding-top:90px;
width:33%;
float:left;
text-align:right;
}
#SwitchPicker .answer{
width:50%;
float:left;
margin:auto;
text-align:center;
}
#SwitchPicker .answers{
width:40%;
padding-left:30%;
padding-right:30%;
margin:auto;
}
#SwitchPicker .detail {
display:none;
}
#SwitchPicker .answer-left {
margin-top:10px;
width:50%;
padding-left:13%;
}
#SwitchPicker .answer-right {
margin-top:10px;
width:50%;
padding-left:37%;
}
#SwitchPicker .answer-left-left {
margin-top:10px;
width:50%;
padding-left:3%;
}
#SwitchPicker .answer-left-right {
margin-top:10px;
width:50%;
padding-left:23%;
}
#SwitchPicker .answer-mid-left {
margin-top:10px;
width:50%;
padding-left:14%;
}
#SwitchPicker .answer-mid-right {
margin-top:10px;
width:50%;
padding-left:36%;
}
#SwitchPicker .answer-right-left {
margin-top:10px;
width:50%;
padding-left:27%;
}
#SwitchPicker .answer-right-right {
margin-top:10px;
width:50%;
padding-left:48%;
}
</style>
</head>
<?php
// Managed or Unmanaged
if ($_GET['st'] == "managed"){
$a1 = "answer-left";
$switch_type = $_GET['st'];
}
else if ($_GET['st'] == "unmanaged"){
$a1 = "answer-right";
$switch_type = $_GET['st'];
}
else if ($_GET['st'] == "smart"){
$a1 = "answer-mid";
$switch_type = $_GET['st'];
}
else {
echo "";
}
// Fast Ethernet or Gigabit
if (($_GET['st'] == "managed") && ($_GET['ss'] == 100)){
$a2 = "answer-left-left";
$switch_type = $_GET['st'];
$switch_speed = $_GET['ss'];
}
else if (($_GET['st'] == "managed") && ($_GET['ss'] == 1000)){
$a2 = "answer-left-right";
$switch_type = $_GET['st'];
$switch_speed = $_GET['ss'];
}
else if (($_GET['st'] == "unmanaged") && ($_GET['ss'] == 100)){
$a2 = "answer-right-left";
$switch_type = $_GET['st'];
$switch_speed = $_GET['ss'];
}
else if (($_GET['st'] == "unmanaged") && ($_GET['ss'] == 1000)){
$a2 = "answer-right-right";
$switch_type = $_GET['st'];
$switch_speed = $_GET['ss'];
}
else if (($_GET['st'] == "smart") && ($_GET['ss'] == 100)){
$a2 = "answer-mid-left";
$switch_type = $_GET['st'];
$switch_speed = $_GET['ss'];
}
else if (($_GET['st'] == "smart") && ($_GET['ss'] == 1000)){
$a2 = "answer-mid-right";
$switch_type = $_GET['st'];
$switch_speed = $_GET['ss'];
}
else {
echo "";
}
?>
<body id="SwitchPicker">
<div class="title">Small Business Decision Tree</div>
<div class="title">Managed or Unmanaged</div>
<div class="trioanswer">
  <div class="trio-answer-bottom-left"><a href="index.php?st=managed">Managed</a></div>
  <div class="trio-answer-bottom-mid"><a href="index.php?st=smart">Smart</a></div>
  <div class="trio-answer-bottom-right"><a href="index.php?st=unmanaged">Unmanaged</a></div>
</div>
<? 
if (isset($_GET['st'])) {
echo"
  <div class=\"" .$a1. "\">
    <div class=\"title\">Switch Speed?</div>
        <div class=\"twinanswer\">
            <div class=\"answer-bottom-left\"><a href=\"index.php?st=" .$switch_type. "&ss=100\">Fast Ethernet (10/100)</a></div>
            <div class=\"answer-bottom-right\"><a href=\"index.php?st=" .$switch_type. "&ss=1000\">GigabitEthernet (1000)</a></div>
        </div>
    </div>";
    }
else {
echo "";
}
?>
<?
if (isset($_GET['ss'])) {
echo"
    <div class=\"" .$a2. "\">
    <div class=\"title\">Switch Size?</div>
        <div class=\"twinanswer\">
            <div class=\"answer-bottom-left\"><a href=\"index.php?st=" .$switch_type. "&ss=" .$switch_speed. "&ssize=desk\">Desktop</a></div>
            <div class=\"answer-bottom-right\"><a href=\"index.php?st=" .$switch_type. "&ss=" .$switch_speed. "&ssize=rack\">Rack-mountable</a>         </div>
        </div>
    </div>";
    }
else {
echo "";
}
?>
</body>
</html>

谢谢，乙

Answer 1

首先你可以采取行

$switch_type = $_GET['st'];
$switch_speed = $_GET['ss'];

出于条件，它们到处都是一样的。只需在if / elses之前或之后执行一次。

此外，我看到，$ a2的每个子部分都取决于具体情况。也许你可以用以下（伪代码）方式构建它：

...
//$a2 always starts the same
$a2 = "answer";

// Type of line
switch($_GET['st']) {
  case "managed":
    $a2 = $a2 + "-left"; break;
  case "unmanaged":
    $a2 = $a2 + "-right"; break;
  case "smart":
    $a2 = $a2 + "-mid"; break;
}

// speed of line
switch($_GET['ss']) {
  case 100:
    $a2 = $a2 + "-left"; break;
  case 1000:
    $a2 = $a2 + "-right"; break;
}
....

之后$ a2应该保持你的合并值，如'answer-left-right'等等。类似的方法可以使用$ a1来完成，但我选择$ a2作为示例，因为它更适合这里。

Answer 2

我过去曾使用过关联数组。

在你的情况下，你应该解析$ _GET [“st”]＆amp; $ _GET [“ss”]位于脚本的顶部。所以你可以将它们分成两个变量$ st和$ ss（你也应该对它们进行验证！）。把它当作给定的，你可以想出类似的东西：

$st_choices = array (
    'managed'    => array (
        '1000'         =>  array (
            'key1'          => 'val1',
            'key2'          => 'val2'
         );
     ),
     'a1'        => 'answer-left',
     'a2'        => 'another-value'

     /** ... **/
);

然后，使用查找功能访问数组。

添加更多元素意味着只需添加上述格式的数组，而不是添加更多if / else if / else分支。

function return_details($st, $ss) {
    $vals = array();

    if (isset($st_choices[$st]) && isset($st_choices[$st][$ss])) {
        $vals['a1'] = $st_choices[$st]["a1"];
        $vals['a2'] = $st_choices[$st]["a2"];
        $vals['key1'] = $vals[$st][$ss]['key1'];
    }
}

根据您的具体情况，您可能还需要在isset（）中包装这些分配。

决策树 - 必须是更好的方式......？

2 个答案: