我有jQuery腳本循環隨機次數的問題,我不知道爲什麼。這裏是我的代碼:jQuery腳本循環不明原因
<!DOCTYPE html>
<html lang="en">
<head>
<?php
include 'head.php'
?>
</head>
<body>
<div id="container">
<!-- Header -->
<?php
include 'header.php'
?>
<!-- Navigation Bar -->
<?php
include 'navigation.php'
?>
<!-- Gallery section -->
<section class="articles">
<h1><a href="projects.php?cat=All">Projects</a></h1>
<hr>
<div id="infoblock">
<?php
if (!empty($_GET['id'])) {
require 'info.php';
}
else {
if (!empty($_GET['cat'])) {
require 'maingallery.php';
}
else {
echo '<p>Database error, please reload your page';
};
};
?>
</div>
</section>
<!-- Footer -->
<?php
include 'footer.php'
?>
</div>
</body>
</html>
所以我的問題與需要maingallery.php。這是maingallery.php代碼:
<div id="filterbuttons">
<h4 class="selected" id="All" href="gallery.php" >All</h4>
<h4 id="Residential" href="gallery.php?cat=Residential" >Residential</h4>
<h4 id="Modernisation+%26+Domestic+Extensions" href="gallery.php?cat=Modernisation+%26+Domestic+Extensions" >Modernisation & Domestic Extensions</h4>
<h4 id="Feasibility+Layouts" href="gallery.php?cat=Feasibility+Layouts" >Feasibility Layouts</h4>
<h4 id="Master+Planning" href="gallery.php?cat=Master+Planning" >Master Planning</h4>
</div>
<ul class="gallery">
<div id="gallerylist">
<?php require 'gallery.php'; ?>
</div>
</ul>
,這是gallery.php:
<?php
if (!empty($_GET)) {
$cat = urldecode($_GET['cat']);
}
else {
$cat = 'All';
};
$dbc = mysqli_connect('server.microlite10.com','XXXXXX','XXXXXX','avd');
if ($dbc) {
getGallery($cat, $dbc);
}
else {
echo '<p>Database error, please refresh your screen!</p>';
};
function getGallery($cat, $dbc) {
$r = 'SELECT * FROM Projects';
$q = mysqli_query($dbc,$r);
while ($row = mysqli_fetch_array($q, MYSQLI_ASSOC)) {
if ($cat == 'All') {
echo '<li class="item">
<a class="info" href="info.php?id='.$row['id'].'"><img src="'.$row['thumbnail'].'" width="212" height="119" alt="'.$row['name'].'"></a>
<h2><a class="info" href="info.php?id='.$row['id'].'">'.$row['name'].'</a></h2>
<h3><a class="cat" href="gallery.php?cat='.urlencode($row['category']).'">'.$row['category'].'</a></h3></li>';
}
else {
if ($row['category']==$cat) {
echo '<li class="item">
<a class="info" href="info.php?id='.$row['id'].'"><img src="'.$row['thumbnail'].'" width="212" height="119" alt="High Tor East, Earl Shilton"></a>
<h2><a class="info" href="info.php?id='.$row['id'].'">'.$row['name'].'</a></h2>
<h3><a class="cat" href="gallery.php?cat='.urlencode($row['category']).'">'.$row['category'].'</a></h3></li>';
};
};
};
}
?>
<script type="text/javascript">
// Assign $cat value to variable
// and find relative <h4> element to assign selected class
var cat = "<?php echo urlencode($cat); ?>";
alert('script executed');
$("h4").each(function() {
var id = $(this).attr('id');
if (cat == id) {
$(this).addClass('selected');
}
else {
$(this).removeClass('selected');
};
});
$("li.item:visible").each(function(i) {
if((i+1)%4==0) $(this).css("margin","30px 0 30px 0px");
else $(this).css("margin","30px 20px 30px 0");
});
$('.cat').bind('click', function(e) {
var href = $(this).attr('href');
$('#gallerylist').load(href);
e.preventDefault();
});
$('h4').bind('click', function(e) {
var href = $(this).attr('href');
$('#gallerylist').one().load(href);
var stateObj = { foo : "bar" };
var newurl = $(this).attr('id');
history.pushState(stateObj, "", ('http://www.damianwojtczak.com/avd2/projects.php?cat='+newurl));
e.preventDefault();
});
$('.info').bind('click' , function(e) {
var href = $(this).attr('href');
$('#infoblock').load(href);
e.preventDefault();
});
</script>
所以我的問題是與jQuery腳本添加到gallery.php文件。當我點擊任何h4元素時,jQuery正在重新加載帶有新內容的#gallerylist元素並阻止默認操作。對於前幾個點擊它工作正常,但似乎來自'gallery.php'文件的腳本正在循環出於某種原因而不點擊任何h4元素。我添加了'alert'消息來檢查我的腳本執行了多少次,並且無法弄清楚爲什麼它會循環。
你可以在這裏檢查這個問題http://www.damianwojtczak.com/avd2/projects.php?cat=All,只是嘗試點擊過濾元素(所有,住宅等),你會注意到腳本循環,因爲警報出現幾次。
完美!解決了這個問題。謝謝 – Guferos 2013-02-09 16:47:08