Brtdku

I'm using "User Follow System" plugin, and i would like to know how to make this js select only one user of the current user i clicked to follow.

I am showing a list of followers and following using get_users in foreach loop.

The problem I am facing is when i click on the follow link for one user, the loading images for all users show up and all the follow links get toggled. $(‘.follow-links a’).toggle();

When i asked the plugin owner he said: Sounds like you may just need to adjust the selector used in the JS to target only the one you clicked on. This was originally built with only one user’s links displayed on the page.

But sorry, I failed to figure it out!

jQuery(document).ready(function($) {

    /*******************************

    follow / unfollow a user

    *******************************/

    $( '.follow-links a' ).on('click', function(e) {

        e.preventDefault();



        var $this = $(this);



        if( pwuf_vars.logged_in != 'undefined' && pwuf_vars.logged_in != 'true' ) {

            alert( pwuf_vars.login_required );

            return;

        }



        var data      = {

            action:    $this.hasClass('follow') ? 'follow' : 'unfollow',

            user_id:   $this.data('user-id'),

            follow_id: $this.data('follow-id'),

            nonce:     pwuf_vars.nonce

        };



        $('img.pwuf-ajax').show();



        $.post( pwuf_vars.ajaxurl, data, function(response) {

            if( response == 'success' ) {

                $('.follow-links a').toggle();

            } else {

                alert( pwuf_vars.processing_error );

            }

            $('img.pwuf-ajax').hide();

        } );

    });

});

display-function.php

<?php

/**

 * Retrieves the follow / unfollow links

 *

 * @access      public

 * @since       1.0

 * @param       int $user_id - the ID of the user to display follow / unfollow links for

 * @return      string

 */



function pwuf_get_follow_unfollow_links( $follow_id = null ) {



    global $user_ID;



    if( empty( $follow_id ) )

        return;



    if( ! is_user_logged_in() )

        return;



    if ( $follow_id == $user_ID )

        return;



    ob_start(); ?>

    <div class="follow-links">

        <?php if ( pwuf_is_following( $user_ID, $follow_id ) ) { ?>

            <span><a href="#" class="unfollow followed" data-user-id="<?php echo $user_ID; ?>" data-follow-id="<?php echo $follow_id; ?>"><span>Following</a></span>

            <a href="#" class="follow" style="display:none;" data-user-id="<?php echo $user_ID; ?>" data-follow-id="<?php echo $follow_id; ?>">Follow</a>

        <?php } else { ?>

            <a href="#" class="follow" data-user-id="<?php echo $user_ID; ?>" data-follow-id="<?php echo $follow_id; ?>">Follow</a>

            <span><a href="#" class="followed unfollow" style="display:none;" data-user-id="<?php echo $user_ID; ?>" data-follow-id="<?php echo $follow_id; ?>"><span>Following</a></span>

        <?php } ?>

        <img src="<?php echo PWUF_FOLLOW_URL; ?>/images/loading.svg" class="pwuf-ajax" style="display:none;"/>

    </div>

    <?php

    return ob_get_clean();

}

The line $('.follow-links a').toggle() is toggling every follow link because the query selector doesn't specify a single child. The call of the toggle method is applied to every child found.

Just replace $('.follow-links a').toggle() with $this.toggle().