0

在处理我的“项目”时,我遇到了一些非常奇怪的烦人结果。为了遍历 MySQL 结果,我使用了一个 while 循环。在 while 循环中回显的行之一现在在每个关闭的 div 之后不断出现。这仅在 firebug 或其他 DOM 检查器中可见,而在源代码中不可见。我不知道是什么导致它,所以任何帮助表示赞赏。在下面,我包含了所有涉及的代码。

谢谢,

山姆

顺便提一句。这仍处于早期开发阶段,因此请考虑到这一点。

代码:

萤火虫:

<div class="contentainer_wrapper">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="wrapper">
<div class="sidebar_navigation gradient">
<ul class="navigation">
<li id="nav1" class="active tip-right" style="height: auto;" data-original-title="Dashboard">
<li id="nav2" class="tip-right" style="height: auto;" data-original-title="Forms">
<li id="nav3" class="tip-right" style="height: auto;" data-original-title="UI Elements">
<li id="nav4" class="tip-right" style="height: auto;" data-original-title="Typography">
<li id="nav5" class="tip-right" style="height: auto;" data-original-title="Tables">
<li id="nav6" class="tip-right" style="height: auto;" data-original-title="Gallery">
<li id="nav7" class="tip-right" style="height: auto;" data-original-title="Grid">
<li id="nav8" class="tip-right" style="height: auto;" data-original-title="Charts">
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</ul>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')">
<div id="canvas" class="content_wrapper">This page was loaded succesfully :D</div>
<div id="loading_modal" class="modal hide fade">
</a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')">
</body>
</html>

php文件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="author" content="Sam Kool">
<title>Admin panel</title>
<link rel="stylesheet" href="../css/bootstrap.css"/>
<link rel="stylesheet" href="../css/bootstrap-responsive.css"/>
<link rel="stylesheet" href="../css/style.css"/>
<!--[if IE 8]><link href="css/ie8.css" rel="stylesheet"><![endif]--><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

<body onLoad="prepare()">
<?php  
session_start();
if(!isset($_SESSION['name'])){
    header('Location: http://localhost/CMS/Admin/');
}   
include ('../config.php');

?>
<div class="highligts_content">
  <div class="container-fluid">
    <div class="stats">
      <div class="row-fluid">
        <div class="span12">
          <div class="statistics">
            <ul class="quickstats">
            <?php  
            $conn = mysql_connect($config['db_host'], $config['db_user'], $config['db_pass']);
            $conn = mysql_select_db($config['db_db']);
            $mysql['sql'] = " SELECT *
                        FROM admin_layout
                        WHERE enabled = '1' and type = 'quickstats'
                        ";
            $mysql['query'] = mysql_query($mysql['sql']);
            while($row = mysql_fetch_array($mysql['query'])){
                echo '<li> <a href="#"> <img src="../img/icons/'.$row["image"].'" alt=""> <span>'.$row["title"].'</span> </a> </li>';
            }
            mysql_close();
            ?>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="contentainer_wrapper">
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span12">
        <div class="wrapper">
          <div class="sidebar_navigation gradient">
            <ul class="navigation">
              <?php
              $i = 1;
              $conn = mysql_connect($config['db_host'], $config['db_user'], $config['db_pass']);
              $conn = mysql_select_db($config['db_db']);
              $mysql['sql'] = " SELECT *
                          FROM admin_components
                          WHERE enabled = '1'
                          ";
              $mysql['query'] = mysql_query($mysql['sql']);
              while($row = mysql_fetch_assoc($mysql['query'])){
                  echo '<li id="nav'.$i.'" class="tip-right" data-original-title="'.$row["title"].'" style="height: auto;">';
                  echo '<a class="'.$row["icon"].'" onClick="load_page(\'nav'.$i.'\', \''.$row["url"].'\')">'; 
                  echo '<span class="tab_label" style="visibility: visible;">'.$row["title"].'</span>';
                  echo '<span class="tab_info" style="visibility: visible;">'.$row["description"].'</span></li>'; 
                  $i ++;

              }
              mysql_close();
              ?>
            </ul>
          </div>
        </div>
        <div class="content_wrapper" id="canvas"> 
        </div>
        <div class="modal hide fade" id="loading_modal">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Loading....</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script> 
function load_page(id, component){
    if($('#'+id).attr('class') == 'active tip-right'){
        alert('nope');
        return; 
    }
    $('.navigation li').each(function(i){
        var myClass = $(this).attr("class");
        if(myClass == 'active tip-right'){
            $(this).attr('class', 'tip-right');
        }
        });
        $('#'+id).attr('class', 'active tip-right');
        $('#loading_modal').modal('show');
        setTimeout(function(){
        $('#canvas').load('/SCMS/admin/components/'+component, function(){
            $('#loading_modal').modal('hide');
        });
        },1000);
}
function prepare(){
    $('#nav1').attr('class', 'active tip-right');
    $('#canvas').load('/SCMS/admin/components/dashboard.php');
    $('#loading_screen').modal({
    keyboard: false,
    hide: true
    })  
}
</script> 
<script type="text/javascript" src="../js/jquery.min.js"></script> 
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.js"></script>
</body>
</html>
4

1 回答 1

1

DOM 检查器几乎总是正确的,您的 HTML 源代码是错误的。当这样的事情发生时,通常表明您忘记关闭标签,或者您以错误的顺序关闭它们。

在回显 html 时,这是一个非常容易犯的错误,因为您通常没有缩进或 IDE 颜色编码来帮助您。

在您的第二个 while 循环中,您似乎打开了一个a标签并且没有回显结束标签。

echo '<li id="nav'.$i.'" class="tip-right" data-original-title="'.$row["title"].'" style="height: auto;">';
//OPENED AN A TAG HERE
echo '<a class="'.$row["icon"].'" onClick="load_page(\'nav'.$i.'\', \''.$row["url"].'\')">'; 
echo '<span class="tab_label" style="visibility: visible;">'.$row["title"].'</span>';
echo '<span class="tab_info" style="visibility: visible;">'.$row["description"].'</span></li>'; 
//OOPS, ENDED LI WITHOUT ENDING A
于 2012-12-08T17:42:16.340 回答