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

【问题标题】：Database lightbox with jquery only showing first entry of the database带有 jquery 的数据库灯箱仅显示数据库的第一个条目
【发布时间】：2015-11-16 08:26:00
【问题描述】：

我正在尝试创建一个页面，该页面从数据库中获取条目并将它们显示在名为“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>
                        ';
            }}

画廊显示数据库中的所有条目，因此工作正常，唯一的问题是灯箱显示第一个条目，所以如果我有一个包含条目“Apples, Pears, Oranges”的数据库，画廊会显示“苹果、梨、橙子”。但是灯箱会在每个条目上显示“Apples”。

我的 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，它将灯箱每个项目上的类切换为“隐藏”。 Whih 基本上使该类的每个项目都不可见，非常适合灯箱。

【问题讨论】：

“这很糟糕”我不知道 - 我见过（和写过）更糟糕的！
谢谢你，让我更有信心了。

标签： php jquery mysql database pdo

【解决方案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;
}

【讨论】：

首先，感谢您的宝贵时间。当您使用静态 html 时，这不是一个糟糕的解决方案，但我使用 数据库连接 来让所有信息显示在灯箱和画廊项目divs 中。然而隐藏类的想法很棒，我会给你功劳，也清理了我的 jquery。
这适用于数据库中的数据，确保每次交互都增加 container1 类，因此它类似于：<div class="container'.$website_id.'">，对于数据 ID 相同：@987654328 @

【解决方案2】：

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

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

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

你有很多 controls 和相同的 id，这对于 jQuery 来说是模棱两可的。

【讨论】：

感谢您抽出宝贵时间，我会查看您的答案，并在尝试此操作时回复您。
我尝试了您的解决方案，但似乎没有解决问题，但感谢您的时间和回答。
欢迎您，尽管我没有告诉您任何解决方案。解决方案将分为两个步骤： 1- 更改 div 的 ID。 2-将$("#background").toggleClass("hidden") 更改为指向新ID 的指针。您也可以按名称搜索控件