Question

我有这个jQuery通过使用插件“ Users Following System”来关注/取消关注用户，我显示了使用带有foreach循环的get_users的用户列表。

如果我在foreach循环中添加了关注按钮的简码。

我面临的问题是，当我单击一个用户的关注按钮时，显示所有用户的加载图像，并且所有关注链接都切换为$(‘.follow-links a’).toggle();

所以我该如何定位选择我单击的唯一用户！提前致谢。

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

这是跟随链接按钮的HTML标记。

<?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.gif" class="pwuf-ajax" style="display:none;"/>
    </div>
    <?php
    return ob_get_clean();
}

Answer 1

好的，我相信最好的学习方法是朝正确的方向轻推以自己解决问题，但这是我如何更改代码的方法：

注意：我已经测试了jQuery，并且确实可以正常工作，但是从理论上讲，这是因为我没有您正在使用的插件，因此无法对其进行全面测试。 < / p>

首先，将<div class="follow-links">的内容更改为：

<?php
if ( pwuf_is_following( $user_ID, $follow_id ) ) {
    $classes = "unfollow";
    $text = "Following";
} else {
    $classes = "follow";
    $text = "Follow";
}
?>
<span><a href="#" class="<?php echo $classes; ?>" data-user-id="<?php echo $user_ID; ?>" data-follow-id="<?php echo $follow_id; ?>"><span><?php echo $text; ?></span></a></span>
<img src="<?php echo PWUF_FOLLOW_URL; ?>/images/loading.gif" class="pwuf-ajax" style="display:none;"/>

您会看到我们只输出一个a元素，并添加适当的类和文本。我将文本包装在span中，以便我们可以使用jQuery进行更改。顺便说一句，您的代码中有2个“未关注”类，但是您没有以编程方式设置“关注”。我不知道这是个问题吗？

第二，将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
        };

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

        $.post( pwuf_vars.ajaxurl, data, function ( response ) {
            if ( response == 'success' ) {
                if ( $this.hasClass( 'follow' ) ) {;
                    $this.removeClass( 'follow' ).addClass( 'unfollow' );
                    $this.find( 'span' ).text( 'Unfollow' );
                } else {;
                    $this.removeClass( 'unfollow' ).addClass( 'follow' );
                    $this.find( 'span' ).text( 'Follow' );
                }
            } else {
                alert( pwuf_vars.processing_error );
            }
            $this.next( 'img.pwuf-ajax' ).hide();
        } );
    } );
} );

您可以使用.toggleClass()来切换类，但是因为我们也想更改span中的文本，所以我选择手动完成.toggleClass()的工作。因此，是的，使用`.toggleClass（）和回调函数可以更简单地实现此目的，但是我认为这样更容易跟踪正在发生的事情。

希望有帮助。

WordPress-jQuery跟随按钮选择用户ID

1 个答案: