php - 编码行出现在每个关闭的 div 之后。 (仅在 DOM 检查器中)

标签 php javascript jquery html mysql

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

谢谢

山姆

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

代码:

Firebug :

<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>

最佳答案

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

关于php - 编码行出现在每个关闭的 div 之后。 (仅在 DOM 检查器中)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13779982/

上一篇：MySQL Select 语法给我每个 id 输出两行，有什么问题吗？

下一篇：php - 将值从一个 div 拖放到另一个 div 并在拖放后进行 mysql 查询

相关文章：

php - 如何在另一个语句中正确使用来自 php mysql select 语句的数据

php - SilverStripe 所见即所得样式约束

JavaScript "or"- PHP 中的功能

javascript - jQuery 文本占位符(通过文本选择？)

javascript - SJCL "Cannot read property ' 替换“未定义”的问题

javascript - 如何使用 JSON 多维数组进行编码

PHP 和 MySQL 过滤多个表

php - 有没有一种快速的方法可以为所有 CSS 类和 ID 添加前缀？

javascript - Nginx 代理未按预期执行

javascript - 如果未选中任何子复选框，如何取消选中 'select-all' 复选框

©2024 IT工具网  联系我们