Question

我正在使用“ User Follow System”插件，我想知道如何使此js只选择我单击以关注的当前用户中的一个用户。

我正在显示关注者列表，并在foreach循环中使用get_users关注。

我面临的问题是，当我单击一位用户的关注链接时，出现了所有用户的加载图像，并且所有关注链接都被切换了。 $(‘.follow-links a’).toggle();

当我问插件所有者时，他说：听起来您可能只需要调整JS中使用的选择器，使其仅定位您单击的选择器。它最初是在页面上仅显示一个用户链接的情况下构建的。

但是抱歉，我没有弄清楚！

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();
}

Answer 1

由于查询选择器未指定单个子项，因此$('.follow-links a').toggle()行正在切换每个跟随链接。 toggle方法的调用将应用于找到的每个孩子。

只需将$('.follow-links a').toggle()替换为$this.toggle()。

Wordpress-JS仅选择我单击以跟随的当前用户

1 个答案: