我使用 toastr 警报库来显示通知。该库原则上可以工作，但存在一些与其功能相关的错误，如下所示：
第一：提醒属性不起作用，比如进度条、关闭按钮、提醒位置等
第二：警报中显示的文本应从 HTML 代码中 ID 为“toastr text”的段落标签中检索。
请根据适当的建议更正我的代码。
const translations = {
en: {
home: "Home",
about: "About",
contact: "Contact us",
selectLanguage: "Select a language",
english: "English",
arabic: "Arabic",
},
ar: {
home: "الصفحة الرئيسية",
about: "من نحن",
contact: "تواصل معنا",
selectLanguage: "إختر لغة",
english: "الانجليزية",
arabic: "العربية",
},
};
const languageSelector = document.querySelector("select");
languageSelector.addEventListener("change", (event) => {
setLanguage(event.target.value);
});
const setLanguage = (language) => {
const elements = document.querySelectorAll("[data-i18n]");
elements.forEach((element) => {
const translationKey = element.getAttribute("data-i18n");
element.textContent = translations[language][translationKey];
});
document.dir = language === "ar" ? "rtl" : "ltr";
};
toastr.success('')// display the Toastr text here
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-top-center",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet"/>
<title>Multi Language Translation</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light justify-content-center">
<div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" lang="en" data-i18n="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-i18n="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" data-i18n="contact">Contact us</a>
</li>
</ul>
</div>
</nav>
<h3 class="text-primary" data-i18n="selectLanguage">Select a language</h3>
<select class="p-1 mt-2">
<option value="en" data-i18n="english" selected>English</option>
<option value="ar" data-i18n="arabic">Arabic</option>
</select>
<p id="Toastr text">toastr text</p>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
</body>
</html>您在定义选项之前调用警报！
toastr.success('') // display the Toastr text here
toastr.options = {...}
您必须先定义选项，然后执行警报。
这是您需要的代码
toastr.options = {...}
toastr.success(document.getElementById('Toastr text').innerText)