我有一个meny.php 文件，它使用ajax 加载到带有id=content 的div 的选定链接，正如您在包含页脚之前所看到的那样。这段代码正在工作，这没什么特别的。我只是认为这段代码可能会有所帮助。
<!DOCTYPE html>
<?php
include 'includes/head.php';
?>
<body>
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a.single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});
/* Apply fancybox to multiple items */
$("a.group").fancybox({
'href' : '#fancybox-inner',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
$("a.single_image").fancybox({
'href' : '#fancybox-inner',
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
$(function(){
// hide the div on page load and use a slidedown effect
$('div.content').fadeOut(0, function(){
$(this).slideDown(500);
});
// capture link clicks and slide up then go to the links href attribute
$('a.slide_page1').click(function(e){
e.preventDefault();
var $href = $(this).attr('href');
$('div.content').slideUp(500, function(){
// window.location = $href;
// alert($href);
});
});
});
</script>
<div class="page">
<?php
include 'includes/header.php';
?>
<div class="container-fluid" id = "bodu">
<div class="row-fluid">
<div class="span12">
<div class="bodu">
<div class="blog">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2" id ="sidebarspan">
<h2>Meny</h2>
<ul id="nav">
<li id ="sidebar">
<a href="hamburgare">Hamburgare</a>
</li>
<li id ="sidebar">
<a href="maltider">Måltider</a>
</li>
<li id ="sidebar">
<a href="dryck">Dryck</a>
</li>
<li id ="sidebar">
<a href="tillbehor">Tillbehör</a>
</li>
<li id ="sidebar">
<a href="desserter">Desserter</a>
</li>
<li id ="sidebar">
<a href="övrigt">Övrigt</a>
</li>
</ul>
</div>
<div class="span10">
<div id = "content" class="content">
<script src="jquery/general.js"></script>
</div>
</div>
</div>
</div>
</div>
<?php
include 'includes/footer.php';
?>
</div>
</div>
</div>
</div>
<div id="bg-bottom" >
<img src="images/bg-bottom.png" alt="bottom">
</div>
</div>
</div>
</body>
现在解决真正的问题。假设我们从meny.php 中选择了“hamburgere”。然后它会尝试像我用ajax 说的那样加载hamburgare.php 文件。该文件看起来像这样
<?php
include '../includes/head.php';
?>
<h1>Hamburgare!</h1>
<p>hamburgare är gott!</p>
<div class="row-fluid" id = "meals">
<div class="span12" id="right-pane">
<?php
$select = "SELECT * FROM hamburgare";
$sql = mysql_query($select) or die(mysql_error());
mysql_num_rows($sql);
while ($row = mysql_fetch_array($sql)) {
$name = "<name>".$row['name']."</name>";
$price = "<price>".$row['price']."</price>";
$description = "<description>".$row['description']." </description>";
$img = $row['image'];
$event = " <a name='$img' class='single_image' href='fancybox-inner' ><img src='Login/$img'/></a>";
echo $event;
/*closing the whileloop*/
}
?>
</div>
</div>
<div style="display:none">
<div id="fancybox-inner">
<?php
$query = mysql_query('SELECT name FROM hamburgare WHERE image = "' . $img . '"');
?>
<div class="container-fluid">
<div class="row-fluid">
<h2><?php echo $query ?></h2>
<h2><?php echo $name ?></h2>
<div class="span4">
<img src="Login/<?php echo $img; ?>" />
<!--Sidebar content-->
</div>
<div class="span8">
<?php echo $description ?>
<!--Body content-->
</div>
</div>
</div>
</div>
</div>
我在这里要做的是从数据库中的 hamburgare 表中加载所有图像，现在我只是在 a-tag 的 while 循环中将它们打印出来。那工作正常，但是当客户点击其中一个图像时，应向客户显示更具体的信息。这里发生的情况是，当您单击显示 fancybox-inner div 的图像之一时，fancybox-inner 包含的信息是关于最后加载的图像的信息。这意味着选择图像并不重要，它将始终显示有关最后加载图像的信息。原因是因为在最后一个 SQL 查询中的 WHERE 子句，我比较了最后加载的图像（$img）谁等于数据库中的那个。所以发生的事情是我遇到了这个重叠的问题。我还比较了 $img 而不是 showsen a-tag 中的 name = $img，
我怎么认为问题比这更大。我唯一要做的就是隐藏fancybox-inner div，并在选择一些图像时显示它。该代码仍然从一开始就执行。所以我觉得我需要 Jquery/AJAX 来为每个图像加载正确的信息。所以我想我需要为while循环中的每个a-tag添加onClick。但是由于我是这方面的新手，所以我不知道如何编写该代码。也许我的假设也是错误的。我不知道。
你们有什么感想？我会感谢各种帮助。
提前致谢