SweetAlert确认后隐藏div教程

✅ 正确做法：用 hide() 或 remove() 替代 location.reload()

原代码中：

location.reload();
localStorage.removeItem('leftcontent');
localStorage.getItem('rightcontent', data); // ❌ 语法错误：getItem 只接受 1 个参数

存在三个关键问题：

• location.reload() 强制刷新，导致所有状态重置，违背“局部更新”原则；
• localStorage.removeItem() 后续语句不会执行（因 reload() 是同步阻塞操作）；
• localStorage.getItem(key, data) 是无效写法，getItem 仅接收一个 key 参数，第二个参数被忽略。

✅ 推荐重构后的核心逻辑如下：

$(document).ready(function() {
    $(document).on('click', '#approve', function() {
        Swal.fire({
            title: 'Are you sure?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) { // 推荐使用 isConfirmed（新版 SweetAlert2）
                $('.leftForms').each(function() {
                    const $form = $(this);
                    const valuesToSend = $form.serialize();

                    $.ajax({
                        url: 'data.php', // 注意：原代码中 url 与 $(this).attr('action') 冲突，应统一
                        type: $form.attr('method') || 'POST',
                        data: valuesToSend,
                        dataType: 'json' // 显式声明，便于解析 response.message
                    })
                    .done(function(response) {
                        Swal.fire({
                            title: 'Data berhasil diupdate!',
                            text: response.message || 'Update completed.',
                            icon: 'success'
                        }).then(() => {
                            // ✅ 安全隐藏目标元素（保留 DOM 结构）
                            $('#content1').hide();

                            // ✅ 或彻底移除（如不再需要该区块）
                            // $('#content1').remove();

                            // ✅ 正确操作 localStorage
                            localStorage.removeItem('leftcontent');
                            // 若需读取 rightcontent 并赋值给变量 data，请分开写：
                            const data = localStorage.getItem('rightcontent');
                            console.log('Retrieved rightcontent:', data);
                        });
                    })
                    .fail(function(xhr) {
                        Swal.fire('Error', 'Failed to update data.', 'error');
                    });
                });
            }
        });
    });
});

? 关键优化说明

⚠️ 注意事项

• 避免重复隐藏：若用户多次点击 #approve，请考虑在隐藏前加判断（如 if ($('#content1').is(':visible'))），或禁用按钮防止重复提交。
• CSS 可见性 vs DOM 移除：.hide() 仅设置 display: none，元素仍存在于 DOM 中，适合后续可能恢复显示的场景；.remove() 则永久删除，不可逆。
• 服务端响应格式：确保 data.php 返回标准 JSON，例如：{"message": "Record updated."}，否则 response.message 可能为 undefined。
• 作用域安全：valuesToSend 应声明为 const valuesToSend = ...，避免隐式全局变量。

通过以上改造，您不仅实现了目标元素的精准隐藏，更提升了代码可维护性、用户体验和运行可靠性——这才是现代前端交互开发的推荐实践。

今天关于《SweetAlert确认后隐藏div教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！