Problem with reply and cancel reply buttons in WordPress comments

widkoinflm
April 27, 2023
343 views
0 votes
2 Answers

If the user clicks on the answer button, the hidden answer button and the cancel answer button will appear. If the user clicks on the cancel reply button, the hidden cancel reply button and the reply button will appear.

function customize_wp_footer() { ?>
    <script>
        jQuery( function( $ ){
                $( '.comment-reply-link' ).on( 'click', function(){
                $( '#cancel-comment-reply-link' ).insertAfter( this ).show();
                $( '.comment-reply-link' ).hide();
            } );
                $( '#cancel-comment-reply-link' ).on( 'click', function(){
                $( '#cancel-comment-reply-link' ).insertAfter( this ).hide();
                $( '.comment-reply-link' ).show();
            } );
        } );
    </script>
<?php } add_action( 'wp_footer', 'customize_wp_footer' );

But there is a problem, when I click on the reply button, the reply button of all comments is hidden, if I want to hide the reply button of the same comment. I need to look for a class or ID that is specific to the same comment.

<div id="comment-28" class="comment_container"></div>

I see that the ID of each comment is specific to the comment itself, How to call the ID of each comment and put it in the javascript code above? For example #comment-ID :

function customize_wp_footer() { ?>
    <script>
        jQuery( function( $ ){
                $( '#comment-ID .comment-reply-link' ).on( 'click', function(){
                $( '#cancel-comment-reply-link' ).insertAfter( this ).show();
                $( '#comment-ID .comment-reply-link' ).hide();
            } );
                $( '#cancel-comment-reply-link' ).on( 'click', function(){
                $( '#cancel-comment-reply-link' ).insertAfter( this ).hide();
                $( '#comment-ID .comment-reply-link' ).show();
            } );
        } );
    </script>
<?php } add_action( 'wp_footer', 'customize_wp_footer' );

My html code :

<div id="reviews" class="woocommerce-Reviews">
    <div id="comments">
        <h2 class="woocommerce-Reviews-title"></h2>
            <ol class="commentlist">
                <li class="review even thread-even depth-1" id="li-comment-24">
                    <div id="comment-24" class="comment_container">
                        <div class="comment-text">
                            <p class="meta">
                                <img src="http://localhost/i/wp-content/uploads/avatar/11-32x32.jpg" width="32" height="32" alt="" class="avatar avatar-32 wp-user-avatar wp-user-avatar-32 alignnone photo">
                                <strong class="woocommerce-review__author"></strong>
                                <em class="woocommerce-review__verified verified"></em>
                                <time class="woocommerce-review__published-date" datetime=""></time>
                            </p>
                            <div class="description"><p></p></div>
                            <div class="footer"><span class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-24" data-commentid="24" data-postid="745" data-belowelement="comment-24" data-respondelement="respond" data-replyto="" aria-label="">replay</a></span></div>
                        </div>
                    </div>
                </li><!-- #comment-## -->
                <li class="review odd alt thread-odd thread-alt depth-1" id="li-comment-25">
                    <div id="comment-25" class="comment_container">
                        <div class="comment-text">
                            <p class="meta">
                                <img src="http://localhost/i/wp-content/uploads/avatar/11-32x32.jpg" width="32" height="32" alt="" class="avatar avatar-32 wp-user-avatar wp-user-avatar-32 alignnone photo">
                                <strong class="woocommerce-review__author"></strong>
                                <em class="woocommerce-review__verified verified"></em>
                                <time class="woocommerce-review__published-date" datetime=""></time>
                            </p>
                            <div class="description"><p></p></div>
                            <div class="footer"><span class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-24" data-commentid="24" data-postid="745" data-belowelement="comment-24" data-respondelement="respond" data-replyto="" aria-label="">replay</a></span></div>
                        </div>
                    </div>
                    <ul class="children">
                        <li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-28">
                            <div id="comment-28" class="comment_container">
                                <div class="comment-text">
                                    <p class="meta">
                                        <img src="http://localhost/i/wp-content/uploads/avatar/11-32x32.jpg" width="32" height="32" alt="" class="avatar avatar-32 wp-user-avatar wp-user-avatar-32 alignnone photo">
                                        <strong class="woocommerce-review__author"></strong>
                                        <em class="woocommerce-review__verified verified"></em>
                                        <time class="woocommerce-review__published-date" datetime=""></time>
                                    </p>
                                    <div class="description"><p></p></div>
                                    <div class="footer"><span class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-24" data-commentid="24" data-postid="745" data-belowelement="comment-24" data-respondelement="respond" data-replyto="" aria-label="">replay</a></span></div>
                                </div>
                            </div>
                            <ul class="children">
                                <li class="review odd alt depth-3" id="li-comment-31">
                                    <div id="comment-31" class="comment_container"> 
                                        <div class="comment-text">
                                            <p class="meta">
                                                <img src="http://localhost/i/wp-content/uploads/avatar/11-32x32.jpg" width="32" height="32" alt="" class="avatar avatar-32 wp-user-avatar wp-user-avatar-32 alignnone photo">
                                                <strong class="woocommerce-review__author"></strong>
                                                <em class="woocommerce-review__verified verified"></em>
                                                <time class="woocommerce-review__published-date" datetime=""></time>
                                            </p>
                                            <div class="description"><p></p></div>
                                            <div class="footer"><span class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-24" data-commentid="24" data-postid="745" data-belowelement="comment-24" data-respondelement="respond" data-replyto="" aria-label="">replay</a></span></div>
                                        </div>
                                    </div>
                                    <ul class="children">
                                        <li class="comment byuser comment-author-admin bypostauthor even depth-4" id="li-comment-32">
                                            <div id="comment-32" class="comment_container">
                                                <div class="comment-text">
                                                    <p class="meta">
                                                        <img src="http://localhost/i/wp-content/uploads/avatar/11-32x32.jpg" width="32" height="32" alt="" class="avatar avatar-32 wp-user-avatar wp-user-avatar-32 alignnone photo">
                                                        <strong class="woocommerce-review__author"></strong>
                                                        <em class="woocommerce-review__verified verified"></em>
                                                        <time class="woocommerce-review__published-date" datetime=""></time>
                                                    </p>
                                                    <div class="description"><p></p></div>
                                                    <div class="footer"><span class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-24" data-commentid="24" data-postid="745" data-belowelement="comment-24" data-respondelement="respond" data-replyto="" aria-label="">replay</a></span></div>
                                                </div>
                                            </div>
                                            <ul class="children">
                                                <li class="review odd alt depth-5" id="li-comment-33">
                                                    <div id="comment-33" class="comment_container">
                                                        <div class="comment-text">
                                                            <p class="meta">
                                                                <img src="http://localhost/i/wp-content/uploads/avatar/11-32x32.jpg" width="32" height="32" alt="" class="avatar avatar-32 wp-user-avatar wp-user-avatar-32 alignnone photo">
                                                                <strong class="woocommerce-review__author"></strong>
                                                                <em class="woocommerce-review__verified verified"></em>
                                                                <time class="woocommerce-review__published-date" datetime=""></time>
                                                            </p>
                                                            <div class="description"><p></p></div>
                                                            <div class="footer"><span class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-24" data-commentid="24" data-postid="745" data-belowelement="comment-24" data-respondelement="respond" data-replyto="" aria-label="">replay</a></span></div>
                                                        </div>
                                                    </div>
                                                    <ul class="children">
                                                        <li class="review even depth-6" id="li-comment-375">
                                                            <div id="comment-375" class="comment_container">
                                                                <div class="comment-text">
                                                                    <p class="meta">
                                                                        <img src="http://localhost/i/wp-content/uploads/avatar/11-32x32.jpg" width="32" height="32" alt="" class="avatar avatar-32 wp-user-avatar wp-user-avatar-32 alignnone photo">
                                                                        <strong class="woocommerce-review__author"></strong>
                                                                        <em class="woocommerce-review__verified verified"></em>
                                                                        <time class="woocommerce-review__published-date" datetime=""></time>
                                                                    </p>
                                                                    <div class="description"><p></p></div>
                                                                    <div class="footer"><span class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-24" data-commentid="24" data-postid="745" data-belowelement="comment-24" data-respondelement="respond" data-replyto="" aria-label="">replay</a></span></div>
                                                                </div>
                                                            </div>
                                                        </li><!-- #comment-## -->
                                                    </ul><!-- .children -->
                                                </li><!-- #comment-## -->
                                            </ul><!-- .children -->
                                        </li><!-- #comment-## -->
                                    </ul><!-- .children -->
                                </li><!-- #comment-## -->
                            </ul><!-- .children -->
                        </li><!-- #comment-## -->
                    </ul><!-- .children -->
                </li><!-- #comment-## -->
            </ol>
    </div>
    <div id="review_form_wrapper">
        <div id="review_form">
            <div id="respond" class="comment-respond">

            </div><!-- #respond -->
        </div>
    </div>
    <div class="clear"></div>
</div>

If you look at the picture, you can see that a parent must be selected who has both the comment and comment boxes with her children :

enter image description here

parent : <li class="review odd alt depth-3" id="li-comment-31">

children : <div id="comment-31" class="comment_container"> and <div id="respond" class="comment-respond">

Only id="li-comment-31" is specific to herself and is not used in other comments.

Is my thought correct? Because I don’t have much knowledge about JavaScript؟

Tags: javascript wordpress

Answers

Chosen as BEST ANSWER

CBroe and Junaed Siam, Thank you both very much for helping me. With a lot of effort and the help of both friends ( CBroe and Junaed Siam ), I was able to solve my problem :

function customize_wp_footer() { ?>
<script>
    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();
        } );
    } );
</script>
<?php } add_action( 'wp_footer', 'customize_wp_footer' );

(Edit)

You can also traverse up the DOM from the reply button to the comment container and then find the .comment-reply-link and #cancel-comment-reply-link elements that are children of the same comment container, without using the comment’s ID. Following code snippet should work –

function customize_wp_footer() { ?>
<script>
    jQuery( function( $ ){
        $( '.comment-reply-link' ).on( 'click', function(){
            var commentContainer = $(this).closest('.comment-text');
            commentContainer.find('#cancel-comment-reply-link').insertAfter(this).show();
            commentContainer.find('.comment-reply-link').hide();
        } );
        $( '#cancel-comment-reply-link' ).on( 'click', function(){
            var commentContainer = $(this).closest('.comment-text');
            commentContainer.find('#cancel-comment-reply-link').insertAfter(this).hide();
            commentContainer.find('.comment-reply-link').show();
        } );
    } );
</script>

Please signup or login to give your own answer.

Click here to cancel reply.