javascript - 如何使用带有引导程序的jquery在一个模式上使用多个按钮
问题描述
需要有关 jquery 代码的帮助,以便在单击每个按钮时,模式将在网页的模式标题中显示:“给乔的新消息”。需要有关 jquery 代码的帮助,以便在单击每个按钮时,模式将在网页的模式标题中显示:“给乔的新消息”。需要有关 jquery 代码的帮助,以便在单击每个按钮时,模式将显示:“给乔的新消息”,在网页的模式标题中。谢谢!
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Modals, Popovers, & Tootips</title>
</head>
<body>
<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Joe">Email Joe</button>
<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Phil">Email Phil</button>
<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Nicki">Email Nicki</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script type="text/javascript">
$("exampleModal").click("show.bs.modal", function (event) {
var button = $(event.relatedTarget)
var recipient = button.data("name")
var modal = $(this)
modal.find(".modal-title").text("New message to " + recipient);
});
</script>
</body>
</html>
```
解决方案
给每个按钮一个我们可以引用的标识符(我使用的是类名'name-button')
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Joe">Email Joe</button>
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Phil">Email Phil</button>
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Nicki">Email Nicki</button>
然后设置他们的点击处理程序
$(".name-button").click(function (event) {
$('.modal-header h5.modal-title').html("New message to " + $(this).attr('data-name'));
});
也不要忘记在顶部导入 jQuery
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
这是根据您的要求的完整页面代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<title>Modals, Popovers, & Tootips</title>
</head>
<body>
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Joe">Email Joe</button>
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Phil">Email Phil</button>
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Nicki">Email Nicki</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
// we put this code inside document.ready so that it won't try and find the 'name-buttons' until the page has fully loaded
$(".name-button").click(function(event) {
$('.modal-header h5.modal-title').html("New message to " + $(this).attr('data-name'));
});
})
</script>
</body>
</html>
推荐阅读
- sqlalchemy - SQLAlchemy 池回收基于空闲时间而不是总时间
- flutter - 如何使用更新的令牌重复请求?
- python - 如何在 Pyomo 中用开区间定义 Var?
- mysql - 将 mySql 文件导入 Amazon rds
- machine-learning - 如何以编程方式收集巨大的面部数据集以进行面部识别?
- php - 如何让 PHP 使用改造?
- ruby-on-rails - # 未定义的方法“每个”
- javascript - 使用reactjs提交时无法从对象中删除数组和属性(多个)
- nginx - .net core api 和 nginx 作为反向代理的性能问题
- azure - 如何从 Azure Key Vault 读取和更新 Azure Logic App 的 parameters.json 文件中的机密信息