如何解决如何在Bootstrap 5中使用JavaScript初始化敬酒？
我无法初始化Bootstrap 5吐司。
初始化吐司的按钮：
<button type="button" class="btn btn-primary" id="toastbtn">Initialize toast</button>
我的JavaScript：
document.getElementById("toastbtn").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl,option)
})
};
JSfiddle：https://jsfiddle.net/5e1t3scp/
JavaScript已从Bootstrap的网站上获取。我尝试了很多次，但无法初始化。我究竟做错了什么？预先感谢！
解决方法
如果您只想显示具有确定 ID 的部分，这就是代码
document.getElementById("toastbtn").onclick = function() {
var myAlert =document.getElementById('toastNotice');//select id of toast
var bsAlert = new bootstrap.Toast(myAlert);//inizialize it
bsAlert.show();//show it
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<!-- button to initialize toast -->
<button type="button" class="btn btn-primary" id="toastbtn">Initialize toast</button>
<!-- Toast -->
<div id="toastNotice" class="toast">
<div class="toast-header">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
<span>×</span>
</button>
</div>
<div class="toast-body">
Hello,world! This is a toast message.
</div>
</div>
</div>
<!-- Popper.js first,then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script>
document.getElementById("toastbtn").onclick = function() {
var myAlert =document.getElementById('toastNotice');//select id of toast
var bsAlert = new bootstrap.Toast(myAlert);//inizialize it
bsAlert.show();//show it
};
</script>
</body>
</html>由于构造函数的第二个参数是可选的，因此不必要。但是，如果您想提供选项，则应以对象的形式提供：
// Defaults according to the documentation
{
animation: true,autohide: true,delay: 500
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<!-- button to initialize toast -->
<button type="button" class="btn btn-primary" id="toastbtn">Initialize toast</button>
<!-- Toast -->
<div class="toast">
<div class="toast-header">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
<span>×</span>
</button>
</div>
<div class="toast-body">
Hello,then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script>
document.getElementById("toastbtn").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function(toastEl) {
// Creates an array of toasts (it only initializes them)
return new bootstrap.Toast(toastEl) // No need for options; use the default options
});
toastList.forEach(toast => toast.show()); // This show them
console.log(toastList); // Testing to see if it works
};
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。