フッターが含まれる前にわかるように、id = contentのdivへの選択されたリンクをajaxでロードするmeny.phpファイルがあります。このコードは機能しており、特別なものではありません。このコードが役立つと思います。
<!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 から「ハンバーガー」を選択したとしましょう。hamburgare.php ファイルを ajax で説明したように、ロードしようとします。そのファイルは次のようになります
<?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-tag の while ループでそれらを印刷しています。これは正常に機能していますが、顧客が画像の 1 つをクリックすると、より具体的な情報が顧客に表示されます。ここで何が起こるかというと、fancybox-inner div が表示されている画像の 1 つをクリックすると、fancybox-inner に含まれる情報は最後に読み込まれた画像に関するものです。つまり、画像が選択されているかどうかに関係なく、最後に読み込まれた画像に関する情報が常に表示されます。その理由は、最後の SQL クエリの WHERE 句が、最後に読み込まれた画像 ($img) とデータベース内の画像を比較するためです。だから何が起こるかというと、この重複する問題が発生します。また、showsen a-tag の name = $img ではなく、$img と比較します。
問題はそれよりも大きいと思います。私が行う唯一のことは、fancybox-inner div を非表示にして、一部の画像が選択されたときに表示することだけです。そのコードは最初から実行されます。したがって、各画像の正しい情報をロードするには Jquery/AJAX が必要です。そのため、while ループ内の a タグごとに onClick を追加する必要があると思います。しかし、私はこのようなことに慣れていないので、そのコードの書き方がわかりません。私の仮説も間違っているかもしれません。知らない。
皆さんはどう思いますか？あらゆる種類の助けに感謝します。
前もって感謝します