javascript - 如何在php中将值从数据库传递到弹出窗口？

Question

我正在完成我的期末项目，并使用 PHP、HTML 和 Jquery 开发一个 Web 应用程序。我的数据库中有一些记录，首先我在主页的 div 中显示每条记录的摘要。其次，当用户单击主页中的“详细信息”按钮时，我想创建以主页作为背景的弹出窗口。我可以使用 Javascript 和 Jquery 创建弹出窗口，但无法将每条记录的 id 传递给“详细信息”按钮或弹出 div。这是我的代码的一部分:

<?php $count = 0; ?>
     <div class="container">
        <div class="col-md-9 join-info">
            <div id="timeline">
<?php
$campaigns = $campaign_arr;
for($i=0;$i<count($campaigns);$i++){
$aid1 = $campaigns[$i]; 
?>              <a name="camps"></a>
                <div class="timeline-item" >   


                    <div>
                        <div class="baslik">
                                <h2> <?php echo $aid1["aid_name"]; ?> </h2>
                                <section class="fave"></section>
                            </div>

                        <div class="aid_details">
                            <p>
                                <?php echo $aid1["aid_comment"]; ?>
                            </p>
                        </div>
                                                <div class="bottom">
                        </div>
<?php 
$item = new Items();
$item->openDB();
$items = $item->getItemsByAidID($aid1["id"]);
for($j=0;$j<count($items);$j++){
    $it = $items[$j];
?>
<div class="rates">
                             <p> <?php echo $it["item_name"]; ?> </p>
                             <div class="progress">
                                <div class="progress-bar progress-bar-danger" style=<?php echo "width:" . $it["fill_rate"] . "%"; ?> ></div>
                             </div><p> eksik: <?php echo $it["needed"]; echo "\n"; ?> &nbsp karşılanan: <?php echo $it["provided"]; ?> </p>
                        </div>
                        <?php } $item->closeDB();  ?>

                        <div class="col-md-3 join-link">
                            <a data-js="open" class="btn">Show Details >></a>

                        </div>

                    </div>
                </div>
                <?php $count++; } ?>
            </div> 

        </div>
     </div>
<!-- end of embedding campaigns-->
</main> <!-- cd-main-content --> <!-- in filter.php page -->
            </div> 

        </div>
</div>
 <div class="container">
        <div class="col-md-9 join-info">
            <div id="timeline">
<div class="popup">

    <div class="timeline-item">
    <div class="timeline-content">

                        <div class="aid_details">

                            <!-- I have failed this point -->
                        </div>

<button name="close">Back</button>
<button name="Katıl">Close!</button>
                    </div>
                </div>
                </div><!--popup -->
<!----></div></div></div>

我在主页的不同 div 中显示数据库中的每条记录，并且这些 div 有一个“显示详细信息”按钮。问题是我无法将每条记录的 acid_id 值传递给弹出窗口。有人可以帮忙吗？抱歉我的英语不好，我是 PHP 的初学者。 有创建弹出窗口的 javascript 部分:

function popupOpenClose(popup) {

    /* Add div inside popup for layout if one doesn't exist */
    if ($(".wrapper").length == 0){
        $(popup).wrapInner("<div class='wrapper' ></div>");

    }

    /* Open popup */
    $(popup).show();


    /* Close popup if user clicks on background */
    $(popup).click(function(e) {
        if ( e.target == this ) {
            if ($(popup).is(':visible')) {
                $(popup).hide();
            }
        }
    });

    /* Close popup and remove errors if user clicks on cancel or close buttons */
    $(popup).find("button[name=close]").on("click", function() {
        if ($(".formElementError").is(':visible')) {
            $(".formElementError").remove();
        }
        $(popup).hide();
    });
}

$(document).ready(function () {
    $("[data-js=open]").on("click", function() {
        popupOpenClose($(".popup"));
    });
});

Answer 1

执行此操作的一个简单方法是为查询中找到的每个项目创建一个隐藏的 div，并根据项目 ID 为其指定一个唯一的 ID。

<div id='hidden_details_<?php echo $the_item_id; ?>' class='hidden_class'>
    put the details here
</div>

然后，当单击特定的详细信息按钮时，我将使用 jQuery 打开每个隐藏的 div。

请注意，只有在您没有很多元素的情况下，这才是有效负载。如果您有超过(仅猜测)10 或 20 个项目，我会寻找不同的解决方案以避免巨大的页面加载。