如何用jQuery实现消息文本Div聚焦时显示标记已读按钮

问题分析 #

原代码存在几个核心问题导致功能失效：

• 消息块的class是block_message_{{$message->id}}，但JS中错误使用.block_message选择器，无法匹配元素。
• 普通Div默认不支持聚焦事件，需要添加tabindex属性才能触发focus。
• 混用jQuery对象和原生JS的addEventListener方法，jQuery对象不能直接调用原生事件绑定API。
• 通过index遍历关联元素不可靠，应该直接使用消息ID关联元素。

步骤1：修改视图层代码 #

给文本区域添加可聚焦属性，同时给元素添加统一class和数据属性，方便JS选择：

<div class="row flex-row align-items-center block-message block_message_{{$message->id}}" data-message-id="{{$message->id}}">
    <!-- 给文本区域添加tabindex使其可聚焦，添加统一class -->
    <div class="col-md-9 message-content" tabindex="0">
        @if ($message->publisher_comments != "" && $message->publisher_comments != null)
            <span>{{ $message->publisher_comments }}</span>
        @else
            <span>{{ $message->client_comments }}</span>
        @endif
    </div>
    <!-- 给按钮容器添加统一class -->
    <div class="col-md-2 d-none mark-read-block" id="block_mark_read_{{$message->id}}">
        <!-- 给按钮添加数据属性存储消息ID -->
        <button class="read-more-info-icon modal-right mark-read-btn" data-message-id="{{$message->id}}">
            <i class="fa fa-eye fa-2x" aria-hidden="true"></i>
            <span class="hidden-info">{{ trans('placeholders.mark_read') }}</span>
        </button>
    </div>
</div>

步骤2：编写正确的jQuery代码 #

实现聚焦显示按钮、点击标记已读的逻辑：

// 聚焦消息文本区域时，显示标记已读按钮
$('.message-content').on('focus', function() {
    $(this).closest('.block-message').find('.mark-read-block').removeClass('d-none');
});

// 可选：失去焦点时隐藏按钮（根据业务需求决定是否保留）
$('.message-content').on('blur', function() {
    $(this).closest('.block-message').find('.mark-read-block').addClass('d-none');
});

// 点击标记已读按钮，发起请求更新状态
$('.mark-read-btn').on('click', function() {
    const messageId = $(this).data('message-id');
    
    // 发起AJAX请求到后端接口（替换为你的实际接口地址）
    $.ajax({
        url: '/messages/' + messageId + '/mark-as-read',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}' // Laravel项目需要CSRF令牌
        },
        success: function() {
            // 成功后的UI反馈：隐藏按钮、更新消息状态等
            $('#block_mark_read_' + messageId).addClass('d-none');
            // 可添加提示：比如alert('消息已标记为已读')
        },
        error: function(xhr) {
            console.error('标记失败:', xhr.responseText);
        }
    });
});

关键说明 #

1. tabindex="0"：让普通Div元素支持聚焦，用户可以通过鼠标点击或键盘Tab键触发聚焦事件。
2. 统一class选择器：避免依赖动态生成的ID，让代码更健壮、易维护。
3. data-message-id属性：直接存储消息ID，无需通过index遍历，避免ID不匹配的问题。
4. 事件委托（可选）：如果消息是动态加载的，建议用事件委托绑定事件，确保新生成的元素也能触发事件：

   // 动态元素的事件委托写法
   $(document).on('focus', '.message-content', function() {
       $(this).closest('.block-message').find('.mark-read-block').removeClass('d-none');
   });
   

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