我对循环随机次数的 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>
所以我的问题是添加到 gallery.php 文件的 jQuery 脚本。当我单击任何 h4 元素时，jQuery 正在使用新内容重新加载 #gallerylist 元素并阻止默认操作。对于最初的几次点击，它工作正常，但似乎来自“gallery.php”文件的脚本由于某种原因正在循环，而没有点击任何 h4 元素。我添加了“警报”消息来检查我的脚本执行了多少次，但无法弄清楚它为什么循环。
您可以在此处查看此问题http://www.damianwojtczak.com/avd2/projects.php?cat=All，只需尝试单击过滤元素（全部、住宅等），您会注意到脚本作为警报循环出现几次。