我有一个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加载汉堡包。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>
我在这里要做的是加载数据库中汉堡包表中的所有图像,现在我只是在a-标签的while循环中打印出它们。这工作很好,但当客户点击其中一个图像更具体的信息应显示给客户。这里发生的情况是,当您单击其中一个图像时,fancybox-innerdiv会显示出来,但fancybox-inner包含的信息是关于最后加载的图像的。这意味着无论选择哪个图像,它都会始终显示有关最后加载图像的信息。原因是在最后一个SQL查询中的WHERE子句中,我将最后加载的图像($img)与数据库中的图像进行比较。所以我遇到了重叠的问题。此外,我比较$img,而不是名称= $img从showsen a-标签,我不知道如何写作为一个SQL查询。
无论如何,我认为问题比那更严重。我所做的唯一的事情是隐藏fancybox-innerdiv,只在一些图像被选中时显示它。该代码仍然从一开始就执行。所以我想我需要Jquery/AJAX为每个图像加载正确的信息。所以我认为我需要为while循环中的每个a标签添加onClick。但因为我是新的东西,我不知道如何写代码。也许我的假设也是错的。我不知道。你们觉得怎么样?我将感激各种各样的帮助。
thanks in advance
您应该先将返回值添加到数组中,然后再进行输出。
例如:$formattedResults = array();
while( $row = mysql_fetch_array( $sql ) )
{
$formattedResults[] = array(
'name' => sprintf( '<name>%s</name>', $row['name'] ),
'price' => sprintf( '<price>%s</price>', $row['price'] ),
'description' => sprintf( '<description>%s</description>', $row['description'] ),
'img' => $row['image'],
'event' => sprintf( '<a name="%s" class="single_image" href="fancybox-inner" ><img src="Login/%s"/></a>', $row['image'], $row['image'] ),
);
}
var_dump( $formattedResults );