jQuery多个按钮的点击事件只对当前按钮有效

Question

朋友你好，

jQuery代码是这样：

jQuery(document).ready(function($) {
    $( '.follow-links a' ).on('click', function(e) {
        e.preventDefault();
 
        var $this = $(this);
 
        if( salong_vars.logged_in != 'undefined' && salong_vars.logged_in != 'true' ) {
            alert( salong_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:     salong_vars.nonce
        };
 
        $('img.salong-ajax').show();
 
        $.post( salong_vars.ajaxurl, data, function(response) {
            if( response == 'success' ) {
                $('.follow-links a').toggle();
            } else {
                alert( salong_vars.processing_error );
            }
            $('img.salong-ajax').hide();
        } );
    });
});

按钮的HTML代码：

<div class="follow-links">
<a href="#" class="follow" data-user-id="1" data-follow-id="2"><i class="icon-plus"></i>关注</a>
<a href="#" class="followed unfollow" style="display:none;" data-user-id="1" data-follow-id="2"><i class="icon-ok"></i>已关注</a>
<img src="/images/loading.gif" class="salong-ajax" style="display: none;">
</div>

有多个按钮，如果修改js才能实现点击当前按钮改变当前按钮的状态，而不是所有的按钮都同时发生改变？
谢谢！

Answer 1

if( response == 'success' ) {
    $this.toggle(); // 这句啊，用当前按钮的this，不要重选一遍所有的a标签；顺带一提，按钮最好语义化写button
} else {
    alert( salong_vars.processing_error );
}