聊天应用Block/Unblock功能异常：Unblock逻辑失效求助

问题根源 #

1. 重复ID冲突：HTML中存在两个相同的id="blockOption"，违反ID唯一性规则，导致选择器逻辑混乱。
2. 错误的按钮文本修改：代码中统一修改聊天框内所有Block/Unblock按钮的文本，导致按钮状态与实际功能不符。
3. 状态判断逻辑错误：通过查找聊天框内所有按钮的文本来判断状态，由于存在多个同选择器按钮，获取的文本并非当前点击按钮的真实状态。

修复方案 #

1. 修复HTML重复ID #

将两个id="blockOption"替换为类名，确保选择器唯一：

<!-- 正常聊天区域的Block按钮 -->
<a class="block-option dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#blockModal" data-chat-box-id="chat-box-1">Block User</a>

<!-- 遮罩层内的Unblock按钮 -->
<a class="block-option dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#blockModal">Unblock User</a>

2. 修正JavaScript逻辑 #

$(document).ready(function () {
    var chatBoxToBlock;
    var currentAction; // 记录当前操作是Block还是Unblock

    // 绑定Block/Unblock按钮点击事件
    $('.block-option[data-bs-target="#blockModal"]').on('click', function () {
        chatBoxToBlock = $(this).closest('.chat-box').attr('id');
        currentAction = $(this).text().trim(); // 获取当前点击按钮的文本

        // 更新模态框内容
        updateBlockModalContent(chatBoxToBlock, currentAction);
    });

    // 模态框确认按钮点击事件
    $('#blockToastBtn').click(function () {
        toggleBlock(chatBoxToBlock, currentAction);
        $('#blockModal').modal('hide');
    });

    // 模态框关闭后重置状态
    $('#blockModal').on('hidden.bs.modal', function () {
        chatBoxToBlock = null;
        currentAction = null;
    });

    // 更新模态框内容
    function updateBlockModalContent(chatBoxId, action) {
        const chatUser = $('#' + chatBoxId).find('.name h6').text().trim();
        const isUnblock = action === 'Unblock User';

        $('#blockModalLabel').text(isUnblock ? 'Unblock User' : 'Block User');
        $('#blockModal .modal-body').html(`
            <p>Are you sure you want to ${isUnblock ? 'unblock' : 'block'} <strong>${chatUser}</strong>?</p>
        `);
        $('#blockToastBtn').text(isUnblock ? 'Unblock' : 'Block');
    }

    // 执行Block/Unblock操作
    function toggleBlock(chatBoxId, action) {
        const overlay = $('#' + chatBoxId).find('.block-overlay');
        const isUnblock = action === 'Unblock User';

        // 切换遮罩层显示状态
        if (isUnblock) {
            overlay.removeClass('visible').addClass('hidden');
        } else {
            overlay.removeClass('hidden').addClass('visible');
        }

        // 显示提示Toast
        const message = isUnblock ? 'You have unblocked ' : 'You have blocked ';
        showToast(message, chatBoxId);
    }

    // 显示提示Toast
    function showToast(message, chatBoxId) {
        const chatUser = $('#' + chatBoxId).find('.name h6').text().trim();
        $('#blockToast .toast-body').text(message + chatUser + '.');
        new bootstrap.Toast($('#blockToast')).show();
    }
});

修复说明 #

• 移除重复ID：使用类名block-option替代重复ID，确保选择器正确指向目标按钮。
• 基于点击按钮判断状态：直接通过当前点击按钮的文本确定操作类型，避免多按钮状态混淆。
• 停止错误的按钮文本修改：保留HTML中按钮的原始文本，仅通过遮罩层的显示/隐藏控制用户可见按钮，逻辑更清晰。
• 简化状态切换逻辑：根据当前操作直接切换遮罩层显示状态，无需额外修改按钮文本。

内容的提问来源于stack exchange，提问作者mokingpu