英文:
the toast is not showing in bootstrap 5 even though no error in developer tools
问题
为什么下面的代码中 Toast 不显示？我正在使用 bootstrap 5。我完全不知道为什么，因为在开发者工具中没有任何错误。任何帮助都会感激。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Template</title>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="/assets/fontawesome-5.15.1/css/all.min.css" />
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h1>Welcome to the Page</h1>
<!-- Your content here -->
<div id="toast-sticky-message" class="position-fixed bottom-0 end-0 p-3" style="z-index: 1500000">
<div class="toast">
<div class="toast-body">
<span id="toast-content"></span>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<script>
$(function() {
function makeAlertElem(string, id = false, replace = false, color = "alert-info", timeout = 5000,
dismissable = true) {
let toastElement = document.getElementById("toast-sticky-message");
if (!toastElement) {
return false;
}
console.log("toast string", string);
toastElement.querySelector("#toast-content").innerHTML = string;
let toast = new bootstrap.Toast(toastElement);
console.log("toast 2", toast);
toast.show();
}
// end function makeAlertElem
makeAlertElem('hello world');
});
</script>
</body>
</html>
英文:
why is the Toast not showing in the code below? I'm using bootstrap 5. I haven't the slightest idea why because there isn't any errors in the developer's tools. any help is appreciated.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Template</title>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="/assets/fontawesome-5.15.1/css/all.min.css" />
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h1>Welcome to the Page</h1>
<!-- Your content here -->
<div id="toast-sticky-message" class="position-fixed bottom-0 end-0 p-3" style="z-index: 1500000">
<div class="toast">
<div class="toast-body">
<span id="toast-content"></span>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<script>
$(function() {
function makeAlertElem(string, id = false, replace = false, color = "alert-info", timeout = 5000,
dismissable = true) {
let toastElement = document.getElementById("toast-sticky-message");
if (!toastElement) {
return false;
}
console.log("toast string", string);
toastElement.querySelector("#toast-content").innerHTML = string;
let toast = new bootstrap.Toast(toastElement);
console.log("toast 2", toast);
toast.show();
}
// end function makeAlertElem
makeAlertElem('hello world');
});
</script>
</body>
</html>
<!-- end snippet -->
答案1
得分: 2
这是因为 Toast 使用了错误的元素进行初始化。你应该目标定位具有类名 toast 的元素：
function makeAlertElem(string, id = false, replace = false, color = "alert-info", timeout = 5000, dismissable = true) {
let toastElement = document.querySelector("#toast-sticky-message .toast");
if (!toastElement) {
return false;
}
toastElement.querySelector("#toast-content").innerHTML = string;
let toast = new bootstrap.Toast(toastElement);
toast.show();
}
// end function makeAlertElem
makeAlertElem('hello world');
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<h1>Welcome to the Page</h1>
<div id="toast-sticky-message" class="position-fixed bottom-0 end-0 p-3" style="z-index: 1500000">
<div class="toast">
<div class="toast-body">
<span id="toast-content"></span>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
注意：我只翻译了代码部分，不包括注释。
英文:
It's because the Toast is initialized with the wrong element. You should target the element with class toast :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function makeAlertElem(string, id = false, replace = false, color = "alert-info", timeout = 5000,
dismissable = true) {
let toastElement = document.querySelector("#toast-sticky-message .toast");
if (!toastElement) {
return false;
}
toastElement.querySelector("#toast-content").innerHTML = string;
let toast = new bootstrap.Toast(toastElement);
toast.show();
}
// end function makeAlertElem
makeAlertElem('hello world');
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<h1>Welcome to the Page</h1>
<div id="toast-sticky-message" class="position-fixed bottom-0 end-0 p-3" style="z-index: 1500000">
<div class="toast">
<div class="toast-body">
<span id="toast-content"></span>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论