JavaScript评论回复按钮切换异常：未取消时切换评论致回复按钮消失

问题描述 #

我有一个带有回复和取消回复按钮的评论页面，现有代码可实现点击回复按钮时切换显示取消回复按钮，但存在问题：当点击某条评论的回复按钮后，未点击该评论的取消回复按钮就点击另一条评论的回复按钮，前一条评论的回复按钮会消失。需要修改代码解决该问题且不破坏原有功能。

原代码 #

jQuery( function( $ ){
    $( '.comment-reply-link' ).on( 'click', function(){
        var commentContainer = $(this).closest('.comment_container');
        commentContainer.find('.comment-reply-link').hide();
        $( '#cancel-comment-reply-link' ).insertAfter( this ).show();
    } );
    $( '#cancel-comment-reply-link' ).on( 'click', function(){
        var commentContainer = $(this).closest('.comment_container');
        commentContainer.find('#cancel-comment-reply-link').insertAfter(this).hide();
        commentContainer.find('.comment-reply-link').show();
    } );
} );

修改后的代码 #

jQuery( function( $ ){
    $( '.comment-reply-link' ).on( 'click', function(){
        // 重置所有评论的回复状态：显示回复按钮，隐藏取消按钮
        $('.comment_container').each(function() {
            $(this).find('.comment-reply-link').show();
            $(this).find('#cancel-comment-reply-link').hide();
        });
        
        // 处理当前点击的评论按钮切换
        var commentContainer = $(this).closest('.comment_container');
        commentContainer.find('.comment-reply-link').hide();
        $( '#cancel-comment-reply-link' ).insertAfter( this ).show();
    } );
    $( '#cancel-comment-reply-link' ).on( 'click', function(){
        var commentContainer = $(this).closest('.comment_container');
        commentContainer.find('#cancel-comment-reply-link').hide();
        commentContainer.find('.comment-reply-link').show();
    } );
} );

改动说明 #

• 新增遍历所有评论容器的逻辑，在点击新的回复按钮前，先把所有评论的回复按钮恢复显示、取消按钮隐藏，确保之前的评论状态被重置
• 保留原有处理当前评论按钮切换的逻辑，不影响原本功能
• 取消按钮的处理逻辑无需修改，依然只针对当前评论容器进行按钮切换

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