我正在尝试创建一个页面，从数据库获取条目并将其显示在 <div> 中称为“画廊项目”。然而灯箱的工作原理是，它只显示数据库的第一个条目。我希望有人能够理解这段代码，并可能帮助我解决我的问题。
我的 html/php/sql
<?php if (isset($_POST["Website"])) {
$query=$db->prepare("SELECT * FROM `portfoliodb`.`website`");
$query->execute();
while ( $row = $query->fetch()){
$website_id = $row['website_id'];
$website_name = $row ['website_name'];
$website_desc_en = $row ['website_desc_en'];
$website_tags = $row ['website_tags'];
$website_image = $row ['website_image'];
$website_type = $row['website_type'];
echo'
<div class="background hidden" id="background"></div>
<a>
<div class="lightbox hidden" id="lightbox">
<div class="box-title hidden" id="box-title">
<h4 class="hidden" id="box-title-h">' . htmlspecialchars($website_name) . '</h4>
<h4 class="close hidden" id="close">X</h4>
</div>
<div class="box-img hidden" id="box-img">
</div>
<div class="box-foot hidden" id="box-foot">
<div class="box-space hidden" id="box-space"></div>
<div class="box-desc hidden" id="box-desc">
<p class="desc-text hidden" id="box-text">'. htmlspecialchars($website_desc_en) .' </p>
</div>
<div class="tag-space-box hidden" id="box-tags-space"></div>
<div class="tag-box hidden" id="box-tags">
<small id="box-small" class="hidden">'. htmlspecialchars($website_tags) .'</small>
</div>
</div>
</div>
</a>
<a>
<div class="gallery-item-web button" id="button">
<p class="gallary-item-text">';
echo htmlspecialchars($website_name);
echo'</p>';
echo '<i class="fa fa-desktop fa-3x position-icon"></i>
</div></a>
';
}}
图库显示数据库中的所有条目，因此工作正常，唯一的问题是灯箱显示第一个条目，所以如果我有一个包含条目“苹果、梨、橙子”的数据库，图库将显示“苹果、梨、橙子”。但灯箱会在每个条目上显示“苹果”。
我的 Jquery
$(document).ready(function(){
$(".button").click(function(){
$("#background").toggleClass("hidden");
$("#lightbox").toggleClass("hidden");
$("#box-title").toggleClass("hidden");
$("#box-title-h").toggleClass("hidden");
$(".close").toggleClass("hidden");
$("#box-img").toggleClass("hidden");
$("#box-foot").toggleClass("hidden");
$("#box-space").toggleClass("hidden");
$("#box-desc").toggleClass("hidden");
$("#box-text").toggleClass("hidden");
$("#box-tags-space").toggleClass("hidden");
$("#box-tags").toggleClass("hidden");
$("#box-small").toggleClass("hidden");
});
$(".close").click(function(){
$("#background").toggleClass("hidden");
$("#lightbox").toggleClass("hidden");
$("#box-title").toggleClass("hidden");
$("#box-title-h").toggleClass("hidden");
$(".close").toggleClass("hidden");
$("#box-img").toggleClass("hidden");
$("#box-foot").toggleClass("hidden");
$("#box-space").toggleClass("hidden");
$("#box-desc").toggleClass("hidden");
$("#box-text").toggleClass("hidden");
$("#box-tags-space").toggleClass("hidden");
$("#box-tags").toggleClass("hidden");
$("#box-small").toggleClass("hidden");
});
$(".background").click(function(){
$("#background").toggleClass("hidden");
$("#lightbox").toggleClass("hidden");
$("#box-title").toggleClass("hidden");
$("#box-title-h").toggleClass("hidden");
$(".close").toggleClass("hidden");
$("#box-img").toggleClass("hidden");
$("#box-foot").toggleClass("hidden");
$("#box-space").toggleClass("hidden");
$("#box-desc").toggleClass("hidden");
$("#box-text").toggleClass("hidden");
$("#box-tags-space").toggleClass("hidden");
$("#box-tags").toggleClass("hidden");
$("#box-small").toggleClass("hidden");
});
});
(我知道这很糟糕，这是我第一次使用 Jquery)
这是灯箱的 Jquery，它将灯箱的每个项目上的类切换为“隐藏”。这基本上使该类的每个项目都看不见，非常适合灯箱。
最佳答案
首先，您不需要为每个元素添加“hidden”类。您可以将其添加到容器元素中，然后其中的所有标签也将被隐藏。
您的主要错误是所有图像都具有相同的 ID 和类，您需要确保每个图像都有唯一的标识符。
尝试我的解决方案:https://jsfiddle.net/3vhv90ce/2/
HTML:
<div class="container1">
<div class="background" id="background"></div>
<a>
<div class="lightbox" id="lightbox">
<div class="box-title" id="box-title">
<h4 class="" id="box-title-h">name</h4>
<h4 class="close" id="close">X</h4>
</div>
<div class="box-img" id="box-img">
</div>
<div class="box-foot" id="box-foot">
<div class="box-space" id="box-space"></div>
<div class="box-desc" id="box-desc">
<p class="desc-text" id="box-text">description</p>
</div>
<div class="tag-space-box" id="box-tags-space"></div>
<div class="tag-box" id="box-tags">
<small id="box-small" class="">tags</small>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="gallery-item-web button" data-id="1">
<p class="gallary-item-text">Click me</p>
<i class="fa fa-desktop fa-3x position-icon"></i>
</div>
<div class="container2">
<div class="background" id="background"></div>
<a>
<div class="lightbox" id="lightbox">
<div class="box-title" id="box-title">
<h4 class="" id="box-title-h">name</h4>
<h4 class="close" id="close">X</h4>
</div>
<div class="box-img" id="box-img">
</div>
<div class="box-foot" id="box-foot">
<div class="box-space" id="box-space"></div>
<div class="box-desc" id="box-desc">
<p class="desc-text" id="box-text">description</p>
</div>
<div class="tag-space-box" id="box-tags-space"></div>
<div class="tag-box" id="box-tags">
<small id="box-small" class="">tags</small>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="gallery-item-web button" data-id="2">
<p class="gallary-item-text">Click me</p>
<i class="fa fa-desktop fa-3x position-icon"></i>
</div>
JS:
$(document).ready(function(){
$(".button").click(function(){
$('.container'+$(this).data('id')).toggleClass("hidden");
});
});
CSS:
.hidden {
display: none;
}
.gallery-item-web {
cursor: pointer;
}
关于php - 带有 jquery 的数据库灯箱仅显示数据库的第一个条目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33731023/