理解问题：Bootstrap Alert的默认行为
在web开发中，我们经常需要在用户完成某个操作（如表单提交）后提供即时反馈。bootstrap的alert组件是一个常用的选择，它提供了一种简洁美观的提示方式。然而，当开发者尝试将一个bootstrap alert用作可重复使用的成功提示（例如，每次表单提交成功后都显示一次），可能会遇到一个常见的问题：alert只显示一次，之后无论如何触发，它都不会再次出现，除非刷新页面。
这个问题的根源在于Bootstrap Alert的默认关闭机制。当Alert组件的关闭按钮（通常是一个带有data-bs-dismiss="alert"属性的
以下是一个典型的初始HTML和JavaScript代码示例，展示了导致此问题的情况：
初始HTML (Alert组件):
感谢！ 您的消息已收到。
初始JavaScript (表单提交逻辑):
const scriptURL = 'https://script.google.com/macros/......'; // 您的Google Apps Script URL
const form = document.forms['portofolio-contact-form'];
const myAlert = document.querySelector('.my-alert'); // 选择Alert元素
const btnKirim = document.querySelector('.my-btn'); // 提交按钮
const btnLoading = document.querySelector('.btn-loading'); // 加载状态按钮
form.addEventListener('submit', e => {
e.preventDefault(); // 阻止表单默认提交行为
btnLoading.classList.toggle('d-none'); // 显示加载状态
btnKirim.classList.toggle('d-none'); // 隐藏提交按钮
fetch(scriptURL, { method: 'POST', body: new FormData(form) })
.then(response => {
btnLoading.classList.toggle('d-none'); // 隐藏加载状态
btnKirim.classList.toggle('d-none'); // 显示提交按钮
myAlert.classList.toggle('d-none'); // 显示Alert (移除d-none)
form.reset(); // 重置表单
console.log('Success!', response);
})
.catch(error => console.error('Error!', error.message));
});在这段代码中，当表单成功提交后，myAlert.classList.toggle('d-none')会移除d-none类，使Alert显示。然而，一旦用户点击Alert上的关闭按钮，由于data-bs-dismiss="alert"的存在，Alert元素会被从DOM中移除，导致后续提交无法再次显示它。
解决方案：自定义Alert关闭行为
要解决这个问题，我们需要阻止Bootstrap的默认移除行为，转而使用自定义的JavaScript来控制Alert的显示和隐藏。核心思路是：
- 移除关闭按钮上的data-bs-dismiss="alert"属性。
- 为关闭按钮添加一个onclick事件，调用一个自定义函数。
- 这个自定义函数负责在用户点击关闭按钮时，仅仅通过添加d-none类来隐藏Alert，而不是将其从DOM中移除。
下面是修改后的HTML和JavaScript代码：
解决问题如下：只列举最近用户提交问题，其余问题前面几次补丁已经解决，不在复述。1、解决搜索问题。以前搜索一定要确定到省下面的某个市，这个不符合用户体验。 现在改为，省--所有城市（默认为所有城市，也可以自己选择某个市）。2、解决首页推荐产品部显示问题。（以前没有考虑多个其他浏览器）3、解决供应、求购 今日产品显示问题。（理由同上）4、解决收藏商家、供应、求购问题。 （链接错误）5、解决后台分类过
修改后的HTML (Alert组件):
感谢！ 您的消息已收到。
修改后的JavaScript (表单提交及自定义关闭逻辑):
const scriptURL = 'https://script.google.com/macros/s/AKfycbzAovQklbPcjlV0Z0MAgTrvDR--cWl3mhWyfwcOneOcSbRPBnk_cSTCP2LOcUCiG5/exec'; // 您的Google Apps Script URL
const form = document.forms['portofolio-contact-form'];
const myAlert = document.querySelector('.my-alert'); // 选择Alert元素
const btnKirim = document.querySelector('.my-btn'); // 提交按钮
const btnLoading = document.querySelector('.btn-loading'); // 加载状态按钮
// 表单提交事件监听器
form.addEventListener('submit', e => {
e.preventDefault(); // 阻止表单默认提交行为
// 显示加载状态，隐藏提交按钮
btnLoading.classList.toggle('d-none');
btnKirim.classList.toggle('d-none');
fetch(scriptURL, { method: 'POST', body: new FormData(form) })
.then(response => {
// 隐藏加载状态，显示提交按钮
btnLoading.classList.toggle('d-none');
btnKirim.classList.toggle('d-none');
// 移除 'd-none' 类来显示 Alert
myAlert.classList.remove('d-none');
form.reset(); // 重置表单
console.log('Success!', response);
})
.catch(error => console.error('Error!', error.message));
});
// 自定义函数：隐藏 Alert
function hideMyAlert() {
myAlert.classList.add('d-none'); // 添加 'd-none' 类来隐藏 Alert
}关键改动解析
-
HTML中的Alert关闭按钮:
- data-bs-dismiss="alert" 被移除。这个属性是导致Alert元素被DOM移除的罪魁祸首。
- onclick="hideMyAlert()" 被添加。现在，当用户点击关闭按钮时，会调用我们自定义的hideMyAlert JavaScript函数。
-
JavaScript中的表单提交成功处理:
- myAlert.classList.remove('d-none'); 明确地移除了d-none类。这意味着每次表单成功提交后，Alert都会被显示出来。
-
新增的JavaScript函数 hideMyAlert():
- function hideMyAlert() { myAlert.classList.add('d-none'); } 这个函数的作用是，当它被调用时，会给myAlert元素添加d-none类。d-none是Bootstrap提供的实用类，用于设置display: none !important;，从而隐藏元素。通过这种方式，Alert只是被隐藏，但仍然保留在DOM中，可以在下次需要时再次显示。
注意事项与最佳实践
- DOM操作的粒度: 这种方法通过控制CSS类（d-none）来管理元素的可见性，而不是直接移除/添加元素，这是一种更高效且灵活的DOM操作方式。
- 可访问性: 确保你的自定义关闭机制仍然能提供良好的可访问性。Bootstrap的data-bs-dismiss通常会处理焦点管理等问题。虽然我们的简单d-none切换可能不会自动处理这些，但对于简单的提示，通常影响不大。如果需要更高级的可访问性，可能需要手动管理焦点。
- 错误处理: 教程中的fetch请求包含了.catch()块来处理网络或API错误。在实际应用中，当出现错误时，你可能需要显示一个不同的Alert（例如，一个红色的错误提示Alert），而不是成功的提示。
- CSS过渡效果: Bootstrap Alert默认带有fade show类，这提供了平滑的显示/隐藏过渡效果。我们的d-none切换会立即隐藏元素。如果希望保留过渡效果，可以考虑使用classList.remove('show')和classList.add('show')，并配合CSS的transition属性，或者手动触发Bootstrap的JS API（new bootstrap.Alert(myAlert).hide()），但这会引入更多复杂性，且仍需确保元素不被移除。对于本教程解决的“只显示一次”问题，上述解决方案已经足够。
- 代码组织: 在大型项目中，建议将hideMyAlert这样的辅助函数封装到更模块化的结构中，例如一个表单处理模块。
通过上述修改，您的Bootstrap Alert组件将能够在每次表单成功提交后正确显示，并在用户点击关闭按钮后隐藏，而不会被从DOM中移除，从而实现可重复使用的提示功能。
