gpt4 book ai didi

javascript - 如何使用 GET 方法将 id 传递给同一页面中的模式?

转载 作者:太空宇宙 更新时间:2023-11-03 10:35:04 24 4
gpt4 key购买 nike

我有以下链接:

<a type="button" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="?id='.$row['upcoming_event_id'].'">
<i class="fa fa-search"></i> Read more</a>

阅读更多内容如下所示:

enter image description here

当我按下阅读更多按钮时,会弹出一个模态框,如下所示:

enter image description here

我尝试了以下代码,但它不起作用:

<div class="modal fade product_view" id="product_view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal" class="class pull-right"><span
class="glyphicon glyphicon-remove"></span></a>
<h3 class="modal-title">I want to show the event id here <?php echo $_GET['id']; ?></h3>
</div>

</div>
</div>
</div>
</div>
</div>

如何解决?还是有更好的方法来做到这一点?我必须将 id 显示到模式中,而不是在另一个页面上。任何帮助将不胜感激。提前致谢。

最佳答案

PHP 代码先执行,因此您不能为 $_GET 设置 PHP 值动态地。使用 javascript 函数。

function setEventId(event_id){
document.querySelector("#event_id").innerHTML = event_id;
}

调用setEventId()来自 anchor 标签的功能

<a type="button" onclick="setEventId(<?= $row['upcoming_event_id'] ?>)" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="javascript:void(0)">
<i class="fa fa-search"></i> Read more</a>

并使用 <span id="event_id"></span>event_id 替换 html 值

<div class="modal fade product_view" id="product_view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal" class="class pull-right"><span
class="glyphicon glyphicon-remove"></span></a>
<h3 class="modal-title">I want to show the event id here <span id="event_id"></span></h3>
</div>

</div>
</div>
</div>
</div>
</div>

这是获取 $row['upcoming_event_id'] 值后的演示示例或页面加载。

function setEventId(event_id){
document.querySelector("#event_id").innerHTML = event_id;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<a type="button" onclick="setEventId(1)" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="javascript:void(0)">
<i class="fa fa-search"></i> Read more</a>

<a type="button" onclick="setEventId(2)" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="javascript:void(0)">
<i class="fa fa-search"></i> Read more</a>


<a type="button" onclick="setEventId(3)" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="javascript:void(0)">
<i class="fa fa-search"></i> Read more</a>

<div class="modal fade product_view" id="product_view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal" class="class pull-right"><span
class="glyphicon glyphicon-remove"></span></a>
<h3 class="modal-title">I want to show the event id here <span id="event_id"></span></h3>
</div>

</div>
</div>
</div>

关于javascript - 如何使用 GET 方法将 id 传递给同一页面中的模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49727211/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com