我正在研究我的最终项目并使用PHP,HTML和Jquery开发Web应用程序。我的数据库中有一些记录,首先我在主页面的div中显示每条记录的摘要。第二,当用户点击主页面中的Detail按钮时,我想创建以主页面为背景的弹出窗口。我可以使用Javascript和Jquery创建弹出窗口,但我无法将每个记录的id传递给Details按钮或弹出窗口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"; ?>   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有一个Show Details按钮。问题是我无法将每条记录的aid_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"));
});
});
答案 0 :(得分:0)
一种简单的方法是为查询中的每个项目创建一个隐藏的div,并根据项目ID为其提供唯一的ID。
<div id='hidden_details_<?php echo $the_item_id; ?>' class='hidden_class'>
put the details here
</div>
然后我会在点击特定详细信息按钮时使用jQuery打开每个隐藏的div。
请注意,如果您没有很多物品,这只会是有效的负担。如果你有超过10个或20个项目(只是猜测),我会寻找一个不同的解决方案来避免巨大的页面加载。