Question

我正在尝试创建一个从数据库中获取条目的页面，并将其显示在名为“gallery-item”的<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，它将灯箱的每个项目上的类切换为“隐藏”。这基本上使得该类的所有项目都不可见，非常适合灯箱。

Answer 1

首先，您不需要为每个元素添加“隐藏”类。您可以将其添加到容器元素中，然后内部的所有标记也将被隐藏。

您的主要错误是为所有图像设置相同的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;
}

Answer 2

我想你的问题来自这些方面：

<div class="background hidden" id="background"></div>

<div class="gallery-item-web button" id="button">

你有很多controls具有相同的id，这对于jQuery来说是不明确的。

带有jquery的数据库灯箱仅显示数据库的第一个条目

2 个答案: