我有一个由10个缩略图组成的网站，我使用php查询mysql来检索数据，我成功检索并逐一显示它，现在我想缩短我的代码，但我需要一些指导.. < / p>
HTML
<div class="img_thumb_holder float-l">
<img class="img_thumb" src="" src2="images/portfolio/Cropped Pics/FS/cropped10.jpg" src3="images/portfolio/Cropped Pics/FS/cropped1.jpg" alt="portfolio"author-img="images/portfolio/huizhong/huizhong.jpg" resume="images/portfolio/huizhong/resume.pdf" work1-title="World Within" work1-desc="Capturing the world within your phone" work2-title="Digital Painting" work2-desc="Digital painting of my favourite character" work3-title="Yoona" work3-desc="Digital painting of my favourite kpop artiste">
<h2 class="caption">Du Hui Zhong<br />Featured Portfolio1</h2>
</div>
<div class="img_thumb_holder float-l">
<img class="img_thumb" src="images/portfolio/Cropped Pics/FS/cropped2.jpg">
<h2 class="caption">Dai Sao Ke<br />Featured Portfolio2</h2>
</div>
<div class="img_thumb_holder float-l">
<img class="img_thumb" src="images/portfolio/Cropped Pics/FS/cropped3.jpg">
<h2 class="caption">Grace Foo<br />Featured Portfolio3</h2>
</div>
<div class="img_thumb_holder float-l">
<img class="img_thumb" src="images/portfolio/Cropped Pics/FS/cropped4.jpg">
<h2 class="caption">Leonard Wee<br />Featured Portfolio4</h2>
</div>
<div class="img_thumb_holder float-l">
<img class="img_thumb" src="images/portfolio/Cropped Pics/FS/cropped5.jpg">
<h2 class="caption">Shaun Koo<br />Featured Portfolio5</h2>
</div>
<div class="img_thumb_holder float-l">
<img class="img_thumb" src="images/portfolio/Cropped Pics/FS/cropped6.jpg">
<h2 class="caption">Jane Sia<br />Featured Portfolio6</h2>
</div>
<div class="img_thumb_holder float-l">
<img class="img_thumb" src="images/portfolio/Cropped Pics/FS/cropped7.jpg">
<h2 class="caption">Gospal Ahmad<br />Featured Portfolio7</h2>
</div>
<div class="img_thumb_holder float-l">
<img class="img_thumb" src="images/portfolio/Cropped Pics/FS/cropped8.jpg">
<h2 class="caption">Mathew Goh<br />Featured Portfolio8</h2>
</div>
<div class="img_thumb_holder float-l">
<img class="img_thumb" src="images/portfolio/Cropped Pics/FS/cropped11.jpg">
<h2 class="caption">Berlinda Chan<br />Featured Portfolio9</h2>
</div>
<div class="img_thumb_holder float-l">
<img class="img_thumb" src="images/portfolio/Cropped Pics/FS/cropped12.jpg">
<h2 class="caption">Joanne Koo<br />Featured Portfolio10</h2>
</div>
// 10 thumbnails holder
PHP
<?php
include 'dbcon.php';
$sql = 'SELECT * FROM userdatafiles JOIN users ON userdatafiles.UserID = users.UserID WHERE Specialisation = "class1o2"';
$result = mysqli_query($con,$sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$links[] = array(
"links" => $row["Link"],
"caption" => $row["Name"],
);
}
echo json_encode($links);
} else {
echo "0 results";
}
?>
JQUERY
$.ajax({
type: "POST",
dataType: "json",
url: "CMS/PHP/displayFeatThumbs.php",
success: function(data) {
$(".img_thumb_holder:nth(0)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[0].links);
$(".img_thumb_holder:nth(0) .caption").html("<span>" + data[0].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");
$(".img_thumb_holder:nth(1)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[1].links);
$(".img_thumb_holder:nth(1) .caption").html("<span>" + data[1].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");
$(".img_thumb_holder:nth(2)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[2].links);
$(".img_thumb_holder:nth(2) .caption").html("<span>" + data[2].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");
$(".img_thumb_holder:nth(3)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[3].links);
$(".img_thumb_holder:nth(3) .caption").html("<span>" + data[3].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");
alert(data[3].links);
alert(data[2].links);
$(".img_thumb_holder:nth(4)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[4].links);
$(".img_thumb_holder:nth(4) .caption").html("<span>" + data[4].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");
$(".img_thumb_holder:nth(5)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[5].links);
$(".img_thumb_holder:nth(5) .caption").html("<span>" + data[5].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");
$(".img_thumb_holder:nth(6)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[6].links);
$(".img_thumb_holder:nth(6) .caption").html("<span>" + data[6].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");
$(".img_thumb_holder:nth(7)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[7].links);
$(".img_thumb_holder:nth(7) .caption").html("<span>" + data[7].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");
$(".img_thumb_holder:nth(8)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[8].links);
$(".img_thumb_holder:nth(8) .caption").html("<span>" + data[8].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");
$(".img_thumb_holder:nth(9)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[9].links);
$(".img_thumb_holder:nth(9) .caption").html("<span>" + data[9].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");
}
});
正如你在我的jquery上看到的那样，我只是为我要展示的图像持有者的其余部分重复它，我知道我可以使用循环来做到这一点，但我不知道如何。另一个问题是，在我的PHP上，如果每个用户存储1张图像，一切都会顺利运行，但如果我在1个用户上有2张图像，它会显示该用户的所有作品，然后再转到下一个用户，我该怎么做才能每个用户只检索1张图片而不是全部？谢谢！
答案 0 :(得分：0)
像这样......
$.ajax({
type: "POST",
dataType: "json",
url: "CMS/PHP/displayFeatThumbs.php",
success: function(data) {
$('.img thumb_holder img').each(function(index, element) {
// Work out the data to set
var imageUrl = "http://localhost/testdatabase/cms" + data[index].links;
var captionHtml = "<span>" + data[index].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>"
// Now apply this to the elements
$(element)
.attr("src", imageUrl);
$(element)
.next()
.html(captionHtml);
});
});
答案 1 :(得分：0)
您可以从PHP创建html视图部分，然后将其返回到ajax函数。
<强> PHP
while ($row = mysqli_fetch_assoc($result)) {
$html_data = '<div class="img_thumb_holder float-l">
<img class="img_thumb" src="' . $row["Link"] . '">
<h2 class="caption">' . $row["Name"] . '</h2>
</div>';
}
echo json_encode($html_data);
<强> JS
$.ajax({
type: "POST",
dataType: "html",
url: "CMS/PHP/displayFeatThumbs.php",
success: function (data) {
//$('.img_thumb_holder').append(data);
$('.img_thumb_holder').html(data);
}
});
$('.img_thumb_holder').append(data);。
$('.img_thumb_holder').html(data);
，这样就可以用new替换旧的imaged。 在你的代码中，数据在服务器端和客户端都是循环的。
答案 2 :(得分：0)
在成功回调中，请执行：
var container = $('.img_thumb_holder');
data.forEach(function (item, i) {
var div = container.append('<div>')
div.append('<img class="img_thumb" src="'+data[i].links+'">')
div.append('<h1 class="caption">'+data[i].caption+'</h1>')
})
答案 3 :(得分：0)
您可以使用$.each()之类的
//cache the holder elements
var $holders = $(".img_thumb_holder");
$.each(data, function (i, dt) {
//access the hodler at index i
var $holder = $holders.eq(i);
//set the corresponding values inside each holder
$holder.children("img").attr("src", "http://localhost/testdatabase/cms/" + dt.links);
$holder.find(".caption").html("<span>" + dt.caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");
})